gatsby-attainlabs-cms 1.0.49 → 1.1.1

package/README.md

@@ -55,17 +55,27 @@ module.exports = {
     {
       resolve: "gatsby-attainlabs-cms",
       options: {
-        brand: "Cash Money", // LendDirect | Cash Money | Heights Finance adding-puck-for-visual-code-editing
+        brand: "Cash Money", // LendDirect | Cash Money | Heights Finance | Attain Finance
         // personalAccessToken: "optional-fallback", // not recommended, but supported
-        environment: "production", // production | dev
-        fetch: ["blogs", "disclaimers", "faqs"] // Array of data to fetch from database
-        debug: false // Console logs blocks created
+        environment: "production", // production | staging | dev
+        // azureBranch: "my-feature-branch", // Optional: Override branch for non-production environments
+        fetch: ["blogs", "disclaimers", "faqs"], // Array of data to fetch from database
+        debug: false, // Console logs blocks created
       },
     },
   ],
 };
 ```
 
+### Environment Options
+
+- **`production`**: Forces content sync from the `master` branch.
+- **`staging`**: Automatically fetches content from the **latest active Pull Request** branch in Azure DevOps. Falls back to `master` if no PR is active.
+- **`dev`**: Skips component sync and data fetching. Useful for local development speed.
+- **Default behavior**: If `environment` is unspecified or other values, it defaults to the `azureBranch` option or `master`.
+
+```
+
 ---
 
 ## Behavior
@@ -79,7 +89,7 @@ module.exports = {
 
 - If the PAT is missing, the plugin will **warn and skip execution** instead of failing the build.
 
-- If the `brand` option is missing or invalid, the plugin will **throw an error** and stop the build.  
+- If the `brand` option is missing or invalid, the plugin will **throw an error** and stop the build.
   Valid values are:
   - `LendDirect`
   - `Cash Money`
@@ -95,7 +105,9 @@ module.exports = {
 If you see:
 
 ```
+
 ⚠️ [gatsby-attainlabs-cms] No PERSONAL_ACCESS_TOKEN found...
+
 ```
 
 ➡️ Double-check that `.env` exists and is loaded in `gatsby-config.js`.
@@ -107,8 +119,10 @@ If you see:
 If you see:
 
 ```
+
 [gatsby-attainlabs-cms] Invalid or missing "brand" option.
 You must specify one of: LendDirect, Cash Money, Heights Finance
+
 ```
 
 ➡️ Make sure you pass a valid brand in `gatsby-config.js`.
@@ -117,5 +131,6 @@ You must specify one of: LendDirect, Cash Money, Heights Finance
 
 ### Token in client code
 
-Don’t use `GATSBY_PERSONAL_ACCESS_TOKEN`. That will leak your secret into the browser bundle.  
+Don’t use `GATSBY_PERSONAL_ACCESS_TOKEN`. That will leak your secret into the browser bundle.
 Always use `PERSONAL_ACCESS_TOKEN`.
+```

package/gatsby-browser.js

@@ -1,7 +1,7 @@
 exports.onClientEntry = (_, pluginOptions) => {
   const { brand } = pluginOptions;
 
-  if (brand === "LendDirect") {
+  if (brand === "LendDirect" || brand === "Cash Money") {
     import("@fontsource/open-sans/300.css");
     import("@fontsource/open-sans/400.css");
     import("@fontsource/open-sans/500.css");

package/gatsby-node.js

@@ -4,7 +4,7 @@ const path = require("path");
 const prettier = require("prettier");
 const fse = require("fs-extra");
 const crypto = require("crypto");
-const { graphql } = require("gatsby");
+const { graphql } = require("gatsby"); // kept (even if unused here) to match your existing file
 
 const brands = {
   LendDirect: "lenddirect",
@@ -15,7 +15,227 @@ const brands = {
 
 const generateSliceWrapper = () => {};
 
-const generatePage = async (blocks, layout, isNested) => {
+/**
+ * ----------------------------
+ * Promise-based download helpers
+ * ----------------------------
+ */
+
+function httpsGet(url, options) {
+  return new Promise((resolve, reject) => {
+    https
+      .get(url, options, (res) => {
+        let data = "";
+        res.on("data", (chunk) => (data += chunk));
+        res.on("end", () => resolve({ res, data }));
+      })
+      .on("error", reject);
+  });
+}
+
+async function listItems({ org, project, repo, repoPath, branch, options }) {
+  const listUrl = `https://dev.azure.com/${org}/${project}/_apis/git/repositories/${encodeURIComponent(
+    repo
+  )}/items?scopePath=${encodeURIComponent(
+    repoPath
+  )}&recursionLevel=full&includeContentMetadata=true&versionDescriptor.version=${encodeURIComponent(
+    branch
+  )}&versionDescriptor.versionType=branch&api-version=7.0`;
+
+  const { res, data } = await httpsGet(listUrl, options);
+
+  if (res.statusCode !== 200) {
+    throw new Error(
+      `Failed to list items for ${repoPath}: ${res.statusCode} ${res.statusMessage}\n${data}`
+    );
+  }
+
+  const result = JSON.parse(data);
+  const posix = path.posix;
+
+  // Exclude files named config.tsx and preview.tsx (same as your original logic)
+  return (result.value || []).filter(
+    (i) =>
+      !i.isFolder &&
+      i.gitObjectType === "blob" &&
+      posix.basename(i.path) !== "config.tsx" &&
+      posix.basename(i.path) !== "preview.tsx"
+  );
+}
+
+function downloadFileAsync({
+  org,
+  project,
+  repo,
+  repoPath,
+  filePath,
+  localBasePath,
+  branch,
+  options,
+}) {
+  return new Promise((resolve, reject) => {
+    const fileUrl = `https://dev.azure.com/${org}/${project}/_apis/git/repositories/${encodeURIComponent(
+      repo
+    )}/items?path=${encodeURIComponent(
+      filePath
+    )}&versionDescriptor.version=${encodeURIComponent(
+      branch
+    )}&versionDescriptor.versionType=branch&api-version=7.0&download=true`;
+
+    const posix = path.posix;
+    const relativePath = posix.relative(repoPath, filePath);
+    const destFile = path.join(localBasePath, ...relativePath.split("/"));
+    const destDir = path.dirname(destFile);
+
+    if (!fs.existsSync(destDir)) {
+      fs.mkdirSync(destDir, { recursive: true });
+    }
+
+    const doRequest = (url) => {
+      https
+        .get(url, options, (res) => {
+          // Follow redirects
+          if (
+            res.statusCode &&
+            res.statusCode >= 300 &&
+            res.statusCode < 400 &&
+            res.headers.location
+          ) {
+            res.resume();
+            return doRequest(res.headers.location);
+          }
+
+          if (res.statusCode !== 200) {
+            res.resume();
+            return reject(
+              new Error(
+                `Failed to download ${filePath}: ${res.statusCode} ${res.statusMessage}`
+              )
+            );
+          }
+
+          const uniqueId = Math.random().toString(36).substring(7);
+          const tmpFile = destFile + "." + uniqueId + ".part";
+          const fileStream = fs.createWriteStream(tmpFile);
+
+          res.pipe(fileStream);
+
+          fileStream.on("error", reject);
+          res.on("error", reject);
+
+          fileStream.on("finish", () => {
+            fileStream.close(() => {
+              try {
+                const ext = path.extname(destFile).toLowerCase();
+                let generatedComment = "";
+                if ([".ts", ".tsx", ".js", ".jsx"].includes(ext)) {
+                  generatedComment =
+                    "// GENERATED FILE // This file is automatically generated by the AttainLabs CMS plugin. Do not edit this file directly.\n";
+                }
+
+                const fileContent = fs.readFileSync(tmpFile, "utf8");
+                fs.writeFileSync(destFile, generatedComment + fileContent);
+                fs.unlinkSync(tmpFile);
+
+                resolve(destFile);
+              } catch (e) {
+                reject(e);
+              }
+            });
+          });
+        })
+        .on("error", reject);
+    };
+
+    doRequest(fileUrl);
+  });
+}
+
+async function downloadTarget({
+  org,
+  project,
+  repo,
+  repoPath,
+  localBasePath,
+  branch,
+  options,
+}) {
+  const items = await listItems({
+    org,
+    project,
+    repo,
+    repoPath,
+    branch,
+    options,
+  });
+
+  console.log(`Found ${items.length} files in ${repoPath}`);
+
+  const results = await Promise.all(
+    items.map((item) =>
+      downloadFileAsync({
+        org,
+        project,
+        repo,
+        repoPath,
+        filePath: item.path,
+        localBasePath,
+        branch,
+        options,
+      })
+    )
+  );
+
+  console.log(`✅ Completed downloading all files for target: ${repoPath}`);
+  return results;
+}
+
+function rewriteSliceWrapper(fetchConfig) {
+  const sliceWrapperPath = path.resolve(
+    "./src/cms/components/sliceWrapper.tsx"
+  );
+
+  if (!fs.existsSync(sliceWrapperPath)) {
+    console.warn(
+      `⚠️ [gatsby-attainlabs-cms] sliceWrapper.tsx not found at ${sliceWrapperPath}. Skipping rewrite.`
+    );
+    return;
+  }
+
+  let content = fs.readFileSync(sliceWrapperPath, "utf8");
+
+  if (!fetchConfig || !fetchConfig.includes("blogs")) {
+    content = content.replace(
+      /# CHECK_BLOGS_START[\s\S]*?# CHECK_BLOGS_END/g,
+      ""
+    );
+    content = content.replace(
+      /\/\* CHECK_BLOGS_START \*\/[\s\S]*?\/\* CHECK_BLOGS_END \*\//g,
+      ""
+    );
+  }
+
+  if (!fetchConfig || !fetchConfig.includes("disclaimers")) {
+    content = content.replace(
+      /# CHECK_DISCLAIMERS_START[\s\S]*?# CHECK_DISCLAIMERS_END/g,
+      ""
+    );
+    content = content.replace(
+      /\/\* CHECK_DISCLAIMERS_START \*\/[\s\S]*?\/\* CHECK_DISCLAIMERS_END \*\//g,
+      ""
+    );
+  }
+
+  fs.writeFileSync(sliceWrapperPath, content);
+}
+
+/**
+ * ----------------------------
+ * Existing code (mostly unchanged)
+ * ----------------------------
+ */
+
+const generatePage = async (blocks, layout, isNested, environment, page) => {
   // Validate input parameters
   if (!Array.isArray(blocks)) {
     throw new Error("Invalid parameters passed to createPage.");
@@ -33,8 +253,8 @@ const generatePage = async (blocks, layout, isNested) => {
     import SEO from "../${isNested && "../"}../cms/components/SEO"; 
 
   export const Head = ({ pageContext }: any) => {
-    const blocks = pageContext.blocks;
-    const meta = blocks.root.props.meta;
+    const blocks = ${environment === "staging" ? (page.draft ? "pageContext.draft.blocks" : "pageContext.blocks") : "pageContext.blocks"}
+    const meta = blocks.root.props.meta
    return (
     <SEO
       title={meta ? meta.title : ""}
@@ -90,6 +310,7 @@ const getAllBlogs = (data) => {
 };
 
 require("dotenv").config();
+
 // Load PAT from env instead of hardcoding (fallback to old const for now but warn)
 exports.onPreInit = async (_, pluginOptions) => {
   const {
@@ -133,23 +354,100 @@ exports.onPreInit = async (_, pluginOptions) => {
     );
   }
 
+  // Helper to fetch latest PR branch
+  const getLatestPullRequestBranch = (org, project, repo, pat) => {
+    return new Promise((resolve) => {
+      const options = {
+        headers: {
+          Authorization: `Basic ${Buffer.from(`:${pat}`).toString("base64")}`,
+          "User-Agent": "gatsby-attainlabs-cms",
+        },
+      };
+
+      // Fetch top 10 active PRs
+      const url = `https://dev.azure.com/${org}/${project}/_apis/git/repositories/${encodeURIComponent(
+        repo
+      )}/pullrequests?searchCriteria.status=active&top=10&api-version=7.0`;
+
+      https
+        .get(url, options, (res) => {
+          let data = "";
+          res.on("data", (chunk) => (data += chunk));
+          res.on("end", () => {
+            if (res.statusCode !== 200) {
+              console.error(
+                `Failed to fetch PRs: ${res.statusCode} ${res.statusMessage}`
+              );
+              resolve(null);
+              return;
+            }
+            try {
+              const result = JSON.parse(data);
+              if (result.value && result.value.length > 0) {
+                const latestPr = result.value.sort(
+                  (a, b) =>
+                    new Date(b.creationDate).getTime() -
+                    new Date(a.creationDate).getTime()
+                )[0];
+
+                const sourceRef = latestPr.sourceRefName;
+                const branchName = sourceRef.replace("refs/heads/", "");
+                resolve(branchName);
+              } else {
+                resolve(null);
+              }
+            } catch (e) {
+              console.error("Error parsing PR response:", e);
+              resolve(null);
+            }
+          });
+        })
+        .on("error", (e) => {
+          console.error("Request error fetching PRs:", e);
+          resolve(null);
+        });
+    });
+  };
+
   const org = "CuroFinTech";
   const project = "Marketing";
   const repo = "Attain Labs";
-  const branch = azureBranch || "master";
 
-  const localTargets = [
-    {
-      localPath: path.resolve(__dirname, "src/sliceWrapper.tsx"),
-      targetPath: path.resolve("./src/cms/components/"),
-    },
-    {
-      localPath: path.resolve(__dirname, "src/map.ts"),
-      targetPath: path.resolve("./src/cms/components/"),
-    },
-  ];
+  let branch = azureBranch || "master";
+
+  if (environment === "production") {
+    branch = "master";
+  } else if (environment === "staging") {
+    try {
+      console.log(
+        "ℹ️ [gatsby-attainlabs-cms] Staging mode: Checking for active PRs..."
+      );
+      const latestPrBranch = await getLatestPullRequestBranch(
+        org,
+        project,
+        repo,
+        pat
+      );
+      if (latestPrBranch) {
+        branch = latestPrBranch;
+        console.log(
+          `ℹ️ [gatsby-attainlabs-cms] Staging mode: Using latest PR branch '${branch}'`
+        );
+      } else {
+        console.warn(
+          "⚠️ [gatsby-attainlabs-cms] Staging mode: No active PRs found. Falling back to 'master'."
+        );
+        branch = "master";
+      }
+    } catch (e) {
+      console.error(
+        "⚠️ [gatsby-attainlabs-cms] Failed to fetch latest PR branch, falling back to 'master':",
+        e
+      );
+      branch = "master";
+    }
+  }
 
-  // List of folders to download from
   const targets = [
     {
       repoPath: `/apps/cms/src/cms/editors/visual-block-editor/brands/${brands[brand]}/`,
@@ -172,179 +470,30 @@ exports.onPreInit = async (_, pluginOptions) => {
     },
   };
 
-  // Copy local files first
-  localTargets.forEach(({ localPath, targetPath }) => {
-    if (!fs.existsSync(targetPath)) {
-      fs.mkdirSync(targetPath, { recursive: true });
-      // console.log(`📂 Created directory: ${targetPath}`);
-    }
-    const fileName = path.basename(localPath);
-    const destFile = path.join(targetPath, fileName);
-
-    if (fileName === "sliceWrapper.tsx") {
-      let content = fs.readFileSync(localPath, "utf8");
-
-      if (!fetchConfig || !fetchConfig.includes("blogs")) {
-        content = content.replace(
-          /# CHECK_BLOGS_START[\s\S]*?# CHECK_BLOGS_END/g,
-          ""
-        );
-        content = content.replace(
-          /\/\* CHECK_BLOGS_START \*\/[\s\S]*?\/\* CHECK_BLOGS_END \*\//g,
-          ""
-        );
-      }
-
-      if (!fetchConfig || !fetchConfig.includes("disclaimers")) {
-        content = content.replace(
-          /# CHECK_DISCLAIMERS_START[\s\S]*?# CHECK_DISCLAIMERS_END/g,
-          ""
-        );
-        content = content.replace(
-          /\/\* CHECK_DISCLAIMERS_START \*\/[\s\S]*?\/\* CHECK_DISCLAIMERS_END \*\//g,
-          ""
-        );
-      }
-
-      fs.writeFileSync(localPath, content);
-      fs.writeFileSync(destFile, content);
-      console.log(`✅ Copied and transformed ${destFile}`);
-    } else {
-      fs.copyFileSync(localPath, destFile);
-      console.log(`✅ Copied ${destFile}`);
-    }
-  });
-
-  // Loop through targets
-  targets.forEach(({ repoPath, localBasePath }) => {
-    const listUrl = `https://dev.azure.com/${org}/${project}/_apis/git/repositories/${encodeURIComponent(
-      repo
-    )}/items?scopePath=${encodeURIComponent(
-      repoPath
-    )}&recursionLevel=full&includeContentMetadata=true&versionDescriptor.version=${encodeURIComponent(
-      branch
-    )}&versionDescriptor.versionType=branch&api-version=7.0`;
-
-    https
-      .get(listUrl, options, (res) => {
-        let data = "";
-        res.on("data", (chunk) => (data += chunk));
-        res.on("end", () => {
-          if (res.statusCode !== 200) {
-            console.error(
-              `Failed to list items for ${repoPath}: ${res.statusCode} ${res.statusMessage}`
-            );
-            console.error(data);
-            return;
-          }
-
-          const result = JSON.parse(data);
-          const posix = path.posix;
-
-          // Exclude files named config.tsx
-          const items = (result.value || []).filter(
-            (i) =>
-              !i.isFolder &&
-              i.gitObjectType === "blob" &&
-              posix.basename(i.path) !== "config.tsx" &&
-              posix.basename(i.path) !== "preview.tsx"
-          );
-
-          console.log(`Found ${items.length} files in ${repoPath}`);
-          let completedDownloads = 0;
-
-          items.forEach((item) => {
-            downloadFile(item.path, repoPath, localBasePath, () => {
-              completedDownloads++;
-              if (completedDownloads === items.length) {
-                console.log(
-                  `✅ Completed downloading all files for target: ${repoPath}`
-                );
-              }
-            });
-          });
-        });
+  /**
+   * ✅ Awaitable download pipeline:
+   * - list items
+   * - download all files
+   * - only after all targets complete, rewrite sliceWrapper.tsx
+   */
+  await Promise.all(
+    targets.map((t) =>
+      downloadTarget({
+        org,
+        project,
+        repo,
+        repoPath: t.repoPath,
+        localBasePath: t.localBasePath,
+        branch,
+        options,
       })
-      .on("error", (err) => {
-        console.error("Request error:", err.message);
-      });
-  });
-
-  // Download a single file preserving folder structure under localBasePath
-  function downloadFile(filePath, repoPath, localBasePath, callback) {
-    const fileUrl = `https://dev.azure.com/${org}/${project}/_apis/git/repositories/${encodeURIComponent(
-      repo
-    )}/items?path=${encodeURIComponent(
-      filePath
-    )}&versionDescriptor.version=${encodeURIComponent(
-      branch
-    )}&versionDescriptor.versionType=branch&api-version=7.0&download=true`;
-
-    const posix = path.posix;
-    const relativePath = posix.relative(repoPath, filePath); // structure under repoPath
-    const destFile = path.join(localBasePath, ...relativePath.split("/"));
-    const destDir = path.dirname(destFile);
-
-    if (!fs.existsSync(destDir)) {
-      fs.mkdirSync(destDir, { recursive: true });
-      // console.log(`📂 Created directory: ${destDir}`);
-    }
-
-    const doRequest = (url) => {
-      https
-        .get(url, options, (res) => {
-          if (
-            res.statusCode &&
-            res.statusCode >= 300 &&
-            res.statusCode < 400 &&
-            res.headers.location
-          ) {
-            return doRequest(res.headers.location);
-          }
-
-          if (res.statusCode !== 200) {
-            console.error(
-              `Failed to download ${filePath}: ${res.statusCode} ${res.statusMessage}`
-            );
-            res.resume();
-            return;
-          }
-
-          const uniqueId = Math.random().toString(36).substring(7);
-          const tmpFile = destFile + "." + uniqueId + ".part";
-          const fileStream = fs.createWriteStream(tmpFile);
-
-          res.pipe(fileStream);
-          fileStream.on("finish", () => {
-            fileStream.close(() => {
-              const ext = path.extname(destFile).toLowerCase();
-              let generatedComment = "";
-              if (
-                ext === ".ts" ||
-                ext === ".tsx" ||
-                ext === ".js" ||
-                ext === ".jsx"
-              ) {
-                generatedComment =
-                  "// GENERATED FILE // This file is automatically generated by the AttainLabs CMS plugin. Do not edit this file directly.\n";
-              }
-              const fileContent = fs.readFileSync(tmpFile, "utf8");
-              fs.writeFileSync(destFile, generatedComment + fileContent);
-
-              // Remove the temporary file
-              fs.unlinkSync(tmpFile);
-              if (callback) callback();
-            });
-          });
-        })
-        .on("error", (err) => {
-          console.error("Request error:", err.message);
-        });
-    };
+    )
+  );
 
-    doRequest(fileUrl);
-  }
+  // ✅ Now safe: no later download will overwrite your changes.
+  rewriteSliceWrapper(fetchConfig);
 };
+
 exports.sourceNodes = async (
   { actions, createNodeId, createContentDigest },
   pluginOptions
@@ -368,13 +517,15 @@ exports.sourceNodes = async (
   console.log(
     `ℹ️ [gatsby-attainlabs-cms] Fetching Trustpilot data for brand: ${brand}`
   );
-  // // Map brand names to Trustpilot business unit IDs
+
   const businessIds = {
     LendDirect: "599affea0000ff0005a95acd",
     "Cash Money": "599afd420000ff0005a95a9d",
     "Heights Finance": "5e72238d600d1a0001be01eb",
   };
+
   const businessUnitId = businessIds[brand];
+
   if (!apiKey) {
     console.warn(
       "⚠️ [gatsby-attainlabs-cms] No TRUSTPILOT_API_KEY found. " +
@@ -382,7 +533,7 @@ exports.sourceNodes = async (
         "Example .env:\n" +
         "TRUSTPILOT_API_KEY=xxxxxxx\n"
     );
-    return; // stop execution early
+    return;
   }
 
   if (!brand || !businessUnitId) {
@@ -391,13 +542,9 @@ exports.sourceNodes = async (
         `Current value: '${brand}'. Supported brands: ${Object.keys(businessIds).join(", ")}. ` +
         "Trustpilot data will not be fetched."
     );
-    return; // stop execution early
+    return;
   }
 
-  console.log(
-    `ℹ️ [gatsby-attainlabs-cms] Fetching Firebase Blogs Data brand: ${brand}`
-  );
-
   const fetchTrustpilotData = async (endpoint) => {
     try {
       const response = await fetch(
@@ -462,7 +609,12 @@ exports.sourceNodes = async (
 
   if (fetchConfig) {
     const firebaseData = await fetchData();
+
     if (fetchConfig.includes("blogs")) {
+      console.log(
+        `ℹ️ [gatsby-attainlabs-cms] Fetching Firebase Blogs Data brand: ${brand}`
+      );
+
       const allBlogs = getAllBlogs(firebaseData.pages);
 
       for (const blog of allBlogs) {
@@ -470,6 +622,7 @@ exports.sourceNodes = async (
         blog.blocks.root.props.datePublished = new Date(
           blog.blocks.root.props.datePublished
         );
+
         const node = {
           ...blog,
           id,
@@ -481,12 +634,17 @@ exports.sourceNodes = async (
             contentDigest: createContentDigest(blog),
           },
         };
+
         createNode(node);
       }
     }
 
     // Disclaimers Source Node
     if (fetchConfig.includes("disclaimers")) {
+      console.log(
+        `ℹ️ [gatsby-attainlabs-cms] Fetching Firebase Disclaimers Data brand: ${brand}`
+      );
+
       const allDisclaimers = Object.values(firebaseData.disclaimers);
       for (const disclaimer of allDisclaimers) {
         const id = createNodeId(`attain-cms-disclaimer-${disclaimer.id}`);
@@ -506,16 +664,19 @@ exports.sourceNodes = async (
     }
   }
 };
+
 exports.createPages = async ({ actions, store }, pluginOptions) => {
   const { brand, environment, debug } = pluginOptions;
   const { createSlice, createPage } = actions;
   const siteRoot = store.getState().program.directory;
+
   if (environment === "dev") {
     console.log(
       "ℹ️ [gatsby-attainlabs-cms] Running in 'dev' environment mode. Skipping page creation."
     );
     return;
   }
+
   // 🚨 Validate brand option
   if (!brand || !brands[brand]) {
     throw new Error(
@@ -528,6 +689,7 @@ exports.createPages = async ({ actions, store }, pluginOptions) => {
         `}`
     );
   }
+
   const firebaseData = await fetch(
     `https://attain-finance-cms-default-rtdb.firebaseio.com/cms/brands/${brands[brand]}/pages.json`
   );
@@ -542,44 +704,50 @@ exports.createPages = async ({ actions, store }, pluginOptions) => {
   });
 
   async function processPage(page, parentPath = "") {
-    // Check for folderUrl first — handle nested folders immediately
+    // Handle folders
     if (
       page.folderUrl &&
       page.children &&
       Object.keys(page.children).length > 0
     ) {
-      // use folderUrl instead of pageUrl for folder structure
       const folderPath = parentPath
         ? path.join(parentPath, page.folderUrl)
         : page.folderUrl;
-      const folderFullPath = path.join(siteRoot, "src/cms/pages", folderPath);
 
+      const folderFullPath = path.join(siteRoot, "src/cms/pages", folderPath);
       await fse.ensureDir(folderFullPath);
 
       for (const child of Object.values(page.children)) {
         await processPage(child, folderPath);
       }
 
-      return; // Stop here for folders — no page created for folder node
+      return;
     }
 
-    // 🧩 Step 2: Process actual pages (no folderUrl)
-    if (page.template === "visual-editor" && page.published) {
+    // Pages
+    if (
+      (page.published && environment === "production") ||
+      (environment === "staging" && page.hasOwnProperty("type"))
+    ) {
+      let blocks =
+        environment === "staging"
+          ? page.draft
+            ? page.draft.blocks
+            : page.blocks
+          : page.blocks;
+
       const {
-        blocks: {
-          content,
-          root: {
-            props: { pageUrl, layout },
-          },
+        content,
+        root: {
+          props: { pageUrl, layout },
         },
-        id,
-      } = page;
+      } = blocks;
 
       // Create slice for each block
       await Promise.all(
         content.map(async (b) => {
           const name = b.props.component.name;
-          const sliceId = `block--${pageUrl}--${name}--${id}--${crypto.randomUUID()}`;
+          const sliceId = `block--${pageUrl}--${name}--${page.id}--${crypto.randomUUID()}`;
 
           createSlice({
             id: sliceId,
@@ -600,7 +768,13 @@ exports.createPages = async ({ actions, store }, pluginOptions) => {
       );
 
       // Generate page file
-      const pageSource = await generatePage(content, layout, parentPath);
+      const pageSource = await generatePage(
+        content,
+        layout,
+        parentPath,
+        environment,
+        page
+      );
       const folderPath = parentPath ? path.join(parentPath, pageUrl) : pageUrl;
       const outPath = path.join(siteRoot, "src/cms/pages", `${folderPath}.tsx`);
       const gatsbyPagePath = path.join(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-attainlabs-cms",
-  "version": "1.0.49",
+  "version": "1.1.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/tsconfig.json

@@ -9,6 +9,5 @@
     "esModuleInterop": true,
     "moduleResolution": "node",
     "skipLibCheck": true
-  },
-  "include": ["src"]
+  }
 }

package/dist/index.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import type { SliceComponentProps } from "gatsby";
-interface SliceWrapperProps extends SliceComponentProps {
-    sliceContext: {
-        componentPath: string;
-    };
-}
-declare function SliceWrapper({ sliceContext }: SliceWrapperProps): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export { SliceWrapper };

package/dist/index.js

@@ -1,8 +0,0 @@
-import React from "react";
-function SliceWrapper({ sliceContext }) {
-    const { componentPath, ...props } = sliceContext;
-    // Dynamically import your component
-    const Component = require(componentPath).default;
-    return React.createElement(Component, props);
-}
-export { SliceWrapper };

package/dist/map.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-export declare const CMS_COMPONENTS: Record<string, React.ComponentType<any>>;
-export type CMSComponentName = keyof typeof CMS_COMPONENTS;

package/dist/map.js

@@ -1,9 +0,0 @@
-// This requires Webpack to include all .tsx files in the folder
-// @ts-ignore
-const context = require.context("./", true, /\.tsx$/);
-export const CMS_COMPONENTS = {};
-context.keys().forEach((key) => {
-    // Remove "./" and ".tsx" from the path to get the component name
-    const name = key.replace(/^.\//, "").replace(/\.tsx$/, "");
-    CMS_COMPONENTS[name] = context(key).default;
-});

package/dist/sliceWrapper.d.ts

@@ -1,10 +0,0 @@
-interface SliceWrapperProps {
-    sliceContext: {
-        componentPath: string;
-        [key: string]: any;
-    };
-    data: any;
-}
-export default function SliceWrapper({ sliceContext, data, }: SliceWrapperProps): import("react/jsx-runtime").JSX.Element | null;
-export declare const TrustPilotQuery: import("gatsby").StaticQueryDocument;
-export {};

package/dist/sliceWrapper.js

@@ -1,139 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { graphql } from "gatsby";
-import { CMS_COMPONENTS } from "./map";
-export default function SliceWrapper({ sliceContext, data, }) {
-    const { componentPath, ...props } = sliceContext;
-    const pathFormatted = componentPath
-        .replace("src/cms/components/", "")
-        .replace(/^.\//, "")
-        .replace(/\.tsx$/, "");
-    const Component = CMS_COMPONENTS[pathFormatted];
-    if (!Component) {
-        console.warn(`Component "${pathFormatted}" not found in CMS_COMPONENTS`);
-        return null;
-    }
-    return (_jsx(Component, { ...props, trustPilotData: data.allTrustPilotReviews.edges[0].node, 
-        /* CHECK_DISCLAIMERS_START */
-        disclaimers: data.allDisclaimers, 
-        /* CHECK_DISCLAIMERS_END */
-        /* CHECK_BLOGS_START */
-        blogs: {
-            sliderBlogs: {
-                ...data.sliderBlogs,
-            },
-            allBlogs: {
-                ...data.allBlogs,
-            },
-        } }));
-}
-export const TrustPilotQuery = graphql `
-  query {
-    allTrustPilotReviews {
-      edges {
-        node {
-          recentReviews {
-            reviews {
-              numberOfLikes
-              stars
-              text
-              title
-              createdAt
-              isVerified
-              reviewVerificationLevel
-              consumer {
-                displayName
-              }
-            }
-          }
-          businessData {
-            score {
-              stars
-              trustScore
-            }
-            displayName
-            numberOfReviews {
-              total
-              usedForTrustScoreCalculation
-            }
-          }
-        }
-      }
-    }
-    # CHECK_DISCLAIMERS_START
-    allDisclaimers: allAttainLabsCmsDisclaimers {
-      edges {
-        node {
-          content
-          published
-          order
-        }
-      }
-    }
-    # CHECK_DISCLAIMERS_END
-    # CHECK_BLOGS_START
-    allBlogs: allAttainLabsCmsBlogs {
-      edges {
-        node {
-          blocks {
-            content {
-              props {
-                content {
-                  props {
-                    text
-                    image {
-                      desktop {
-                        url
-                      }
-                    }
-                  }
-                  #   type
-                }
-              }
-            }
-            root {
-              props {
-                author
-                datePublished
-                pageUrl
-              }
-            }
-          }
-        }
-      }
-    }
-    sliderBlogs: allAttainLabsCmsBlogs(
-      limit: 9
-      sort: { blocks: { root: { props: { datePublished: DESC } } } }
-    ) {
-      edges {
-        node {
-          blocks {
-            content {
-              props {
-                content {
-                  props {
-                    text
-                    image {
-                      desktop {
-                        url
-                      }
-                    }
-                  }
-                  #   type
-                }
-              }
-            }
-            root {
-              props {
-                author
-                datePublished
-                pageUrl
-              }
-            }
-          }
-        }
-      }
-    }
-    # CHECK_BLOGS_END
-  }
-`;

package/src/index.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import type { SliceComponentProps } from "gatsby";
-
-interface SliceWrapperProps extends SliceComponentProps {
-  sliceContext: {
-    componentPath: string;
-  };
-}
-
-function SliceWrapper({ sliceContext }: SliceWrapperProps) {
-  const { componentPath, ...props } = sliceContext;
-
-  // Dynamically import your component
-  const Component = require(componentPath).default;
-  return React.createElement(Component, props);
-}
-
-export { SliceWrapper };

package/src/map.ts

@@ -1,16 +0,0 @@
-// GENERATED FILE // This file is automatically generated by the AttainLabs CMS plugin. Do not edit this file directly.
-import React from "react";
-
-// This requires Webpack to include all .tsx files in the folder
-// @ts-ignore
-const context = require.context("./", true, /\.tsx$/);
-
-export const CMS_COMPONENTS: Record<string, React.ComponentType<any>> = {};
-
-context.keys().forEach((key: string) => {
-  // Remove "./" and ".tsx" from the path to get the component name
-  const name = key.replace(/^.\//, "").replace(/\.tsx$/, "");
-  CMS_COMPONENTS[name] = context(key).default;
-});
-
-export type CMSComponentName = keyof typeof CMS_COMPONENTS;

package/src/sliceWrapper.tsx

@@ -1,161 +0,0 @@
-// GENERATED FILE // This file is automatically generated by the AttainLabs CMS plugin. Do not edit this file directly.
-
-import React from "react";
-import { graphql, type SliceComponentProps } from "gatsby";
-import { CMS_COMPONENTS } from "./map";
-
-interface SliceWrapperProps {
-  sliceContext: {
-    componentPath: string;
-    [key: string]: any;
-  };
-  data: any;
-}
-
-export default function SliceWrapper({
-  sliceContext,
-  data,
-}: SliceWrapperProps) {
-  const { componentPath, ...props } = sliceContext;
-  const pathFormatted = componentPath
-    .replace("src/cms/components/", "")
-    .replace(/^.\//, "")
-    .replace(/\.tsx$/, "");
-  const Component = CMS_COMPONENTS[pathFormatted];
-  if (!Component) {
-    console.warn(`Component "${pathFormatted}" not found in CMS_COMPONENTS`);
-    return null;
-  }
-
-  return (
-    <Component
-      {...props}
-      trustPilotData={data.allTrustPilotReviews.edges[0].node}
-      /* CHECK_DISCLAIMERS_START */
-      disclaimers={data.allDisclaimers}
-      /* CHECK_DISCLAIMERS_END */
-      /* CHECK_BLOGS_START */
-      blogs={{
-        sliderBlogs: {
-          ...data.sliderBlogs,
-        },
-        allBlogs: {
-          ...data.allBlogs,
-        },
-      }}
-      /* CHECK_BLOGS_END */
-    />
-  );
-}
-
-export const TrustPilotQuery = graphql`
-  query {
-    allTrustPilotReviews {
-      edges {
-        node {
-          recentReviews {
-            reviews {
-              numberOfLikes
-              stars
-              text
-              title
-              createdAt
-              isVerified
-              reviewVerificationLevel
-              consumer {
-                displayName
-              }
-            }
-          }
-          businessData {
-            score {
-              stars
-              trustScore
-            }
-            displayName
-            numberOfReviews {
-              total
-              usedForTrustScoreCalculation
-            }
-          }
-        }
-      }
-    }
-    # CHECK_DISCLAIMERS_START
-    allDisclaimers: allAttainLabsCmsDisclaimers {
-      edges {
-        node {
-          content
-          published
-          order
-        }
-      }
-    }
-    # CHECK_DISCLAIMERS_END
-    # CHECK_BLOGS_START
-    allBlogs: allAttainLabsCmsBlogs {
-      edges {
-        node {
-          blocks {
-            content {
-              props {
-                content {
-                  props {
-                    text
-                    image {
-                      desktop {
-                        url
-                      }
-                    }
-                  }
-                  #   type
-                }
-              }
-            }
-            root {
-              props {
-                author
-                datePublished
-                pageUrl
-              }
-            }
-          }
-        }
-      }
-    }
-    sliderBlogs: allAttainLabsCmsBlogs(
-      limit: 9
-      sort: { blocks: { root: { props: { datePublished: DESC } } } }
-    ) {
-      edges {
-        node {
-          blocks {
-            content {
-              props {
-                content {
-                  props {
-                    text
-                    image {
-                      desktop {
-                        url
-                      }
-                    }
-                  }
-                  #   type
-                }
-              }
-            }
-            root {
-              props {
-                author
-                datePublished
-                pageUrl
-              }
-            }
-          }
-        }
-      }
-    }
-    # CHECK_BLOGS_END
-  }
-`;