Merge pull request #461 from CodeForAfrica/ft/entity-page-blocks

feat(cms): refactor home page to use block-based tenant and entity se…

Author: kelvinkipruto

public/cms/entity-selection.png

@@ -1,18 +1,14 @@
 import React, { Suspense } from "react";
 
-import { queryPageBySlug } from "@/lib/payload";
+import { getGlobalPayload, queryPageBySlug } from "@/lib/payload";
 import { notFound, redirect } from "next/navigation";
 import { getDomain } from "@/lib/domain";
 import { CommonHomePage } from "@/components/CommonHomePage";
 import { BlockRenderer } from "@/components/BlockRenderer";
 import Navigation from "@/components/Navigation";
 import Footer from "@/components/Footer";
-import { PoliticalEntityList } from "@/components/PoliticalEntityList";
 import { getTenantBySubDomain, getTenantNavigation } from "@/lib/data/tenants";
-import {
-  getPoliticalEntitiesByTenant,
-  getPromiseCountsForEntities,
-} from "@/lib/data/politicalEntities";
+import { getPoliticalEntitiesByTenant } from "@/lib/data/politicalEntities";
 
 type Args = {
   params: Promise<{
@@ -39,7 +35,7 @@ export default async function Page(params: Args) {
   const politicalEntities = await getPoliticalEntitiesByTenant(tenant);
 
   const politicalEntity = politicalEntities.find(
-    (entity) => entity.slug === maybePoliticalEntitySlug,
+    (entity) => entity.slug === maybePoliticalEntitySlug
   );
 
   if (!politicalEntity) {
@@ -48,18 +44,25 @@ export default async function Page(params: Args) {
       if (onlyEntity) {
         const fallbackPageSlugs = slugs.length > 0 ? slugs : ["index"];
         const sanitizedPageSlugs = fallbackPageSlugs.filter(
-          (slug) => slug && slug !== "index",
+          (slug) => slug && slug !== "index"
         );
         const segments = [onlyEntity.slug, ...sanitizedPageSlugs].filter(
-          Boolean,
+          Boolean
         );
         const targetPath = segments.length > 0 ? `/${segments.join("/")}` : "/";
         redirect(targetPath);
       }
     }
     const fallbackPageSlugs = slugs.length > 0 ? slugs : ["index"];
-    const promiseCounts = await getPromiseCountsForEntities(
-      politicalEntities.map((entity) => entity.id),
+    const payload = await getGlobalPayload();
+    const homePage = await payload.findGlobal({
+      slug: "home-page",
+    });
+    const entityBlocks = (homePage?.entitySelector?.blocks ?? []).map(
+      (block) =>
+        block.blockType === "entity-selection"
+          ? { ...block, pageSlugs: fallbackPageSlugs }
+          : block
     );
 
     return (
@@ -69,12 +72,7 @@ export default async function Page(params: Args) {
           {...navigation}
           tenantSelectionHref={tenantSelectionHref}
         />
-        <PoliticalEntityList
-          tenant={tenant}
-          politicalEntities={politicalEntities}
-          pageSlugs={fallbackPageSlugs}
-          promiseCounts={promiseCounts}
-        />
+        <BlockRenderer blocks={entityBlocks} />
         <Footer title={title} description={description} {...footer} />
       </>
     );

public/cms/tenant-selector.png

@@ -1,14 +1,45 @@
 import { NextRequest, NextResponse } from "next/server";
+import { unlink } from "node:fs/promises";
 
-import {
-  mapPublishedReports,
-  type PublishedReportsResponse,
-} from "@/lib/meedan";
-import { syncMeedanReports } from "@/lib/syncMeedanReports";
-import { writeFileSync } from "node:fs";
+import { getGlobalPayload } from "@/lib/payload";
+import type { Media, Promise as PromiseDoc } from "@/payload-types";
+import { downloadFile } from "@/utils/files";
 
 const WEBHOOK_SECRET_ENV_KEY = "WEBHOOK_SECRET_KEY";
 
+type MeedanFile = {
+  url?: unknown;
+};
+
+type MeedanField = {
+  value?: unknown;
+};
+
+type MeedanWebhookPayload = {
+  data?: {
+    id?: unknown;
+  };
+  object?: {
+    file?: MeedanFile[];
+    data?: {
+      fields?: MeedanField[];
+    };
+  };
+};
+
+const normaliseString = (value: unknown): string | null => {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : null;
+  }
+
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return String(value);
+  }
+
+  return null;
+};
+
 export const POST = async (request: NextRequest) => {
   const configuredSecret = process.env[WEBHOOK_SECRET_ENV_KEY];
 
@@ -17,8 +48,8 @@ export const POST = async (request: NextRequest) => {
       "meedan-sync:: Missing WEBHOOK_SECRET_KEY environment variable"
     );
     return NextResponse.json(
-      { error: "Service misconfigured" },
-      { status: 500 }
+      { ok: false, updated: false, error: "Service misconfigured" },
+      { status: 200 }
     );
   }
 
@@ -28,50 +59,118 @@ export const POST = async (request: NextRequest) => {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
-  let parsed: unknown;
+  let parsed: MeedanWebhookPayload;
 
   try {
-    parsed = await request.json();
+    parsed = (await request.json()) as MeedanWebhookPayload;
   } catch (_error) {
+    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+  const meedanId = normaliseString(parsed?.data?.id);
+
+  if (!meedanId) {
     return NextResponse.json(
       {
-        error: "Invalid JSON body",
+        error: "Missing Meedan ID",
       },
       { status: 400 }
     );
   }
-  // TODO: @kelvinkipruto remove this; only for testing
-  writeFileSync(
-    `Payload-${Date.now().toString()}.json`,
-    JSON.stringify(parsed)
-  );
 
-  const reports = mapPublishedReports(
-    (parsed ?? {}) as PublishedReportsResponse
-  );
+  const imageUrl = normaliseString(parsed?.object?.file?.[0]?.url ?? null);
 
-  if (reports.length === 0) {
+  if (!imageUrl) {
     return NextResponse.json(
-      {
-        error: "No valid reports provided",
-      },
+      { error: "No image URL provided" },
       { status: 400 }
     );
   }
 
   try {
-    await syncMeedanReports({
-      reports,
+    const payload = await getGlobalPayload();
+
+    const { docs } = await payload.find({
+      collection: "promises",
+      limit: 1,
+      where: {
+        meedanId: {
+          equals: meedanId,
+        },
+      },
     });
 
-    return NextResponse.json({ ok: true });
+    const promise = (docs[0] ?? null) as PromiseDoc | null;
+
+    if (!promise) {
+      return NextResponse.json({ error: "Promise not found" }, { status: 404 });
+    }
+
+    if (promise.imageUrl?.trim() === imageUrl) {
+      return NextResponse.json({ ok: true, updated: false }, { status: 200 });
+    }
+
+    const fallbackAlt =
+      (
+        parsed?.object?.data?.fields?.[0]?.value as string | undefined
+      )?.trim() ??
+      promise.title?.trim() ??
+      promise.headline?.trim() ??
+      "Meedan promise image";
+
+    let filePath: string | null = null;
+
+    try {
+      filePath = await downloadFile(imageUrl);
+
+      const media = (await payload.create({
+        collection: "media",
+        data: {
+          alt: fallbackAlt,
+        },
+        filePath,
+      })) as Media;
+
+      const mediaId =
+        typeof media?.id === "string"
+          ? media.id
+          : typeof media?.id === "number"
+            ? String(media.id)
+            : null;
+
+      if (!mediaId) {
+        return NextResponse.json(
+          { error: "Failed to cache image" },
+          { status: 500 }
+        );
+      }
+
+      await payload.update({
+        collection: "promises",
+        id: promise.id,
+        data: {
+          image: mediaId,
+          imageUrl,
+        },
+      });
+
+      return NextResponse.json({ ok: true, updated: true }, { status: 200 });
+    } finally {
+      if (filePath) {
+        try {
+          await unlink(filePath);
+        } catch (cleanupError) {
+          console.warn(
+            "meedan-sync:: Failed to clean up temp image",
+            cleanupError
+          );
+        }
+      }
+    }
   } catch (error) {
-    console.error("meedan-sync:: Failed to process reports", error);
+    console.error("meedan-sync:: Failed to process webhook", error);
     return NextResponse.json(
-      {
-        error: "Failed to process reports",
-      },
-      { status: 500 }
+      { ok: false, updated: false, error: "Failed to process webhook" },
+      { status: 200 }
     );
   }
 };

src/app/(frontend)/[...slugs]/page.tsx

@@ -0,0 +1,41 @@
+import { Block } from "payload";
+
+export const EntitySelection: Block = {
+  slug: "entity-selection",
+  imageURL: "/cms/entity-selection.png",
+  imageAltText: "Entity Selection",
+  labels: {
+    singular: {
+      en: "Entity Selection",
+      fr: "Sélection d'entité",
+    },
+    plural: {
+      en: "Entity Selections",
+      fr: "Sélections d'entités",
+    },
+  },
+  fields: [
+    {
+      name: "emptyTitle",
+      type: "text",
+      required: true,
+      label: {
+        en: "Empty List Title",
+        fr: "Titre de la liste vide",
+      },
+      defaultValue:
+        "No political entities have been published yet for this tenant",
+    },
+    {
+      name: "EmptySubtitle",
+      type: "textarea",
+      required: true,
+      label: {
+        en: "Empty List Subtitle",
+        fr: "Sous-titre de la liste vide",
+      },
+      defaultValue:
+        "Check back soon for newly tracked leaders and their promises.",
+    },
+  ],
+};

src/app/api/meedan-sync/route.ts

@@ -0,0 +1,49 @@
+import { Block } from "payload";
+
+export const TenantSelection: Block = {
+  slug: "tenant-selection",
+  imageURL: "/cms/tenant-selector.png",
+  imageAltText: "Tenant Selector",
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+      label: {
+        en: "Section title",
+        fr: "Titre de la section",
+      },
+      defaultValue: "Select Tenant",
+    },
+    {
+      name: "subtitle",
+      type: "textarea",
+      required: true,
+      label: {
+        en: "Section description",
+        fr: "Description de la section",
+      },
+      defaultValue: "Choose a country to view their tracked promises.",
+    },
+    {
+      name: "ctaLabel",
+      required: true,
+      type: "text",
+      label: {
+        en: "CTA label",
+        fr: "Libellé du CTA",
+      },
+      defaultValue: "Open tenant site",
+    },
+    {
+      name: "emptyListLabel",
+      type: "text",
+      required: true,
+      label: {
+        en: "Empty Tenant List Label",
+        fr: "Étiquette de liste de locataires vide",
+      },
+      defaultValue: "No tenants created yet",
+    },
+  ],
+};

src/blocks/EntitySelection.ts

@@ -47,7 +47,6 @@ export const NavigationTab: Tab = {
       type: "array",
       required: true,
       minRows: 1,
-      maxRows: 2,
       fields: [
         {
           name: "secondaryNavigation",