Merge pull request #433 from CodeForAfrica/ft/hero-fixes

feat(hero): add promise tracking functionality and refactor status resolution

Author: kelvinkipruto

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

@@ -11,7 +11,7 @@ import { PoliticalEntityList } from "@/components/PoliticalEntityList";
 import { getTenantBySubDomain, getTenantNavigation } from "@/lib/data/tenants";
 import {
   getPoliticalEntitiesByTenant,
-  getExtractionCountsForEntities,
+  getPromiseCountsForEntities,
 } from "@/lib/data/politicalEntities";
 
 type Args = {
@@ -44,7 +44,7 @@ export default async function Page(params: Args) {
 
   if (!politicalEntity) {
     const fallbackPageSlugs = slugs.length > 0 ? slugs : ["index"];
-    const extractionCounts = await getExtractionCountsForEntities(
+    const promiseCounts = await getPromiseCountsForEntities(
       politicalEntities.map((entity) => entity.id)
     );
 
@@ -55,7 +55,7 @@ export default async function Page(params: Args) {
           tenant={tenant}
           politicalEntities={politicalEntities}
           pageSlugs={fallbackPageSlugs}
-          extractionCounts={extractionCounts}
+          promiseCounts={promiseCounts}
         />
         <Footer title={title} description={description} {...footer} />
       </>

src/blocks/Hero/index.ts

@@ -13,6 +13,7 @@ export const Hero: Block = {
         en: "Tagline",
         fr: "Accroche",
       },
+      defaultValue: "Tracking",
       admin: {
         description: {
           en: "Displayed alongside the political entity name in the hero.",
@@ -30,6 +31,12 @@ export const Hero: Block = {
             en: "Promise Label",
             fr: "Libellé des promesses",
           },
+          admin: {
+            description: {
+              en: "Label displayed beside the total count of synced promises.",
+              fr: "Libellé affiché à côté du nombre total de promesses synchronisées.",
+            },
+          },
           defaultValue: "promises",
         },
         {
@@ -65,6 +72,7 @@ export const Hero: Block = {
         en: "Profile Title Override",
         fr: "Remplacement du titre du profil",
       },
+      defaultValue: "Campaign Promises made by",
       admin: {
         description: {
           en: "Optional text that replaces the political entity position shown above the last updated date.",

src/components/Hero/index.tsx

@@ -3,7 +3,7 @@ import { getGlobalPayload } from "@/lib/payload";
 import type {
   HeroBlock,
   PoliticalEntity,
-  AiExtraction as AiExtractionDocument,
+  Promise as PromiseDocument,
   PromiseStatus,
 } from "@/payload-types";
 import { format } from "date-fns";
@@ -62,9 +62,7 @@ type StatusById = Map<string, PromiseStatus>;
 
 type StatusSummaryMap = Map<string, HeroStatusSummary>;
 
-type AiExtractionItem = NonNullable<
-  AiExtractionDocument["extractions"]
->[number];
+type PromiseItem = PromiseDocument;
 
 const FALLBACK_GROUP_DEFINITIONS = [
   {
@@ -81,21 +79,30 @@ const FALLBACK_GROUP_DEFINITIONS = [
   },
 ];
 
-const resolveExtractionStatus = (
-  extraction: AiExtractionItem,
-  statusById: StatusById
+const resolvePromiseStatus = (
+  promise: PromiseItem,
+  statusById: StatusById,
+  statusByLabel: Map<string, PromiseStatus>
 ): PromiseStatus | null => {
-  const statusRef = extraction.Status;
+  const statusRef = promise.status;
 
-  if (!statusRef) {
-    return null;
+  if (statusRef) {
+    if (typeof statusRef === "string") {
+      const mapped = statusById.get(statusRef);
+      if (mapped) {
+        return mapped;
+      }
+    } else {
+      return statusRef;
+    }
   }
 
-  if (typeof statusRef === "string") {
-    return statusById.get(statusRef) ?? null;
+  const label = promise.statusLabel?.trim().toLowerCase();
+  if (!label) {
+    return null;
   }
 
-  return statusRef;
+  return statusByLabel.get(label) ?? null;
 };
 
 const formatUpdatedAt = (date: string): string => {
@@ -210,57 +217,55 @@ export const Hero = async ({ entitySlug, ...block }: HeroProps) => {
     statusDocs.map((status) => [status.id, status])
   );
   const statusSummaries = buildStatusSummaries(statusDocs);
+  const statusByLabel = new Map<string, PromiseStatus>();
+  statusDocs.forEach((status) => {
+    const labelKey = status.label?.trim().toLowerCase();
+    if (labelKey) {
+      statusByLabel.set(labelKey, status);
+    }
+
+    const meedanKey = status.meedanId?.trim().toLowerCase();
+    if (meedanKey && !statusByLabel.has(meedanKey)) {
+      statusByLabel.set(meedanKey, status);
+    }
+  });
 
-  const { docs: documentDocs } = await payload.find({
-    collection: "documents",
+  const { docs: promiseDocs } = await payload.find({
+    collection: "promises",
     where: {
       politicalEntity: {
         equals: entity.id,
       },
     },
     limit: -1,
+    depth: 1,
   });
 
-  const documentIds = documentDocs.map((doc) => doc.id);
+  let totalPromises = 0;
 
-  const { docs: aiExtractionDocs } = documentIds.length
-    ? await payload.find({
-        collection: "ai-extractions",
-        where: {
-          document: {
-            in: documentIds,
-          },
-        },
-        depth: 2,
-        limit: -1,
-      })
-    : { docs: [] };
+  for (const promise of promiseDocs as PromiseItem[]) {
+    const status = resolvePromiseStatus(
+      promise,
+      statusById,
+      statusByLabel
+    );
 
-  let totalExtractions = 0;
-
-  for (const aiExtractionDoc of aiExtractionDocs) {
-    const extractions = aiExtractionDoc.extractions ?? [];
-
-    for (const extraction of extractions) {
-      const status = resolveExtractionStatus(extraction, statusById);
-
-      if (!status) {
-        continue;
-      }
-
-      const summary = statusSummaries.get(status.id);
-      if (!summary) {
-        continue;
-      }
+    if (!status) {
+      continue;
+    }
 
-      summary.count += 1;
-      totalExtractions += 1;
+    const summary = statusSummaries.get(status.id);
+    if (!summary) {
+      continue;
     }
+
+    summary.count += 1;
+    totalPromises += 1;
   }
 
   statusSummaries.forEach((summary) => {
     summary.percentage =
-      totalExtractions > 0 ? (summary.count / totalExtractions) * 100 : 0;
+      totalPromises > 0 ? (summary.count / totalPromises) * 100 : 0;
   });
 
   const groups = buildChartGroups(block.chartGroups, statusSummaries);
@@ -306,7 +311,7 @@ export const Hero = async ({ entitySlug, ...block }: HeroProps) => {
       image: entityImage,
     },
     metrics: {
-      total: totalExtractions,
+      total: totalPromises,
       statuses: summaries,
       groups,
     },

src/components/PoliticalEntityList.tsx

@@ -22,7 +22,7 @@ type PoliticalEntityListProps = {
   tenant: Tenant;
   politicalEntities: PoliticalEntity[];
   pageSlugs?: string[];
-  extractionCounts?: Record<string, number>;
+  promiseCounts?: Record<string, number>;
 };
 
 const buildHref = (entity: PoliticalEntity, pageSlugs: string[] = []) => {
@@ -41,7 +41,7 @@ const buildHref = (entity: PoliticalEntity, pageSlugs: string[] = []) => {
 export const PoliticalEntityList = async ({
   politicalEntities,
   pageSlugs = [],
-  extractionCounts = {},
+  promiseCounts = {},
 }: PoliticalEntityListProps) => {
   const payload = await getGlobalPayload();
 
@@ -74,7 +74,7 @@ export const PoliticalEntityList = async ({
             {politicalEntities.map(async (entity, index) => {
               const href = buildHref(entity, pageSlugs);
               const media = await resolveMedia(entity.image);
-              const extractionCount = extractionCounts[entity.id] ?? 0;
+              const promiseCount = promiseCounts[entity.id] ?? 0;
               const initials = entity.name
                 .split(" ")
                 .slice(0, 2)
@@ -132,9 +132,9 @@ export const PoliticalEntityList = async ({
                           ) : null}
                         </Box>
                         <Chip
-                          label={`${extractionCount} promise${extractionCount === 1 ? "" : "s"}`}
-                          color={extractionCount > 0 ? "primary" : "default"}
-                          variant={extractionCount > 0 ? "filled" : "outlined"}
+                          label={`${promiseCount} promise${promiseCount === 1 ? "" : "s"}`}
+                          color={promiseCount > 0 ? "primary" : "default"}
+                          variant={promiseCount > 0 ? "filled" : "outlined"}
                         />
                       </Stack>
                     </ListItemButton>

src/lib/data/politicalEntities.ts

@@ -1,5 +1,9 @@
 import { getGlobalPayload } from "@/lib/payload";
-import type { PoliticalEntity, Tenant } from "@/payload-types";
+import type {
+  PoliticalEntity,
+  Tenant,
+  Promise as PromiseDoc,
+} from "@/payload-types";
 
 const payload = await getGlobalPayload();
 
@@ -48,19 +52,23 @@ export const getPoliticalEntityBySlug = async (
   return docs[0];
 };
 
-export const getExtractionCountsForEntities = async (
+export const getPromiseCountsForEntities = async (
   entityIds: string[]
 ): Promise<Record<string, number>> => {
   if (entityIds.length === 0) {
     return {};
   }
 
-  const { docs: documents } = await payload.find({
-    collection: "documents",
-    depth: 0,
+  const counts = entityIds.reduce<Record<string, number>>((acc, id) => {
+    acc[id] = 0;
+    return acc;
+  }, {});
+
+  const { docs: promises } = await payload.find({
+    collection: "promises",
     limit: -1,
+    depth: 0,
     select: {
-      id: true,
       politicalEntity: true,
     },
     where: {
@@ -70,56 +78,15 @@ export const getExtractionCountsForEntities = async (
     },
   });
 
-  const docToEntity = new Map<string, string>();
-  const documentIds: string[] = [];
-
-  for (const doc of documents) {
-    const entityRelation = doc.politicalEntity;
+  for (const promise of promises as PromiseDoc[]) {
+    const relation = promise.politicalEntity;
     const entityId =
-      typeof entityRelation === "string" ? entityRelation : entityRelation?.id;
-    if (!entityId) continue;
-    docToEntity.set(doc.id, entityId);
-    documentIds.push(doc.id);
-  }
-
-  if (documentIds.length === 0) {
-    return entityIds.reduce<Record<string, number>>((acc, id) => {
-      acc[id] = 0;
-      return acc;
-    }, {});
-  }
-
-  const { docs: aiExtractions } = await payload.find({
-    collection: "ai-extractions",
-    depth: 0,
-    limit: -1,
-    select: {
-      document: true,
-      extractions: true,
-    },
-    where: {
-      document: {
-        in: documentIds,
-      },
-    },
-  });
-
-  const counts = entityIds.reduce<Record<string, number>>((acc, id) => {
-    acc[id] = 0;
-    return acc;
-  }, {});
+      typeof relation === "string" ? relation : relation?.id ?? null;
+    if (!entityId) {
+      continue;
+    }
 
-  for (const extraction of aiExtractions) {
-    const relation = extraction.document;
-    const documentId = typeof relation === "string" ? relation : relation?.id;
-    if (!documentId) continue;
-    const entityId = docToEntity.get(documentId);
-    if (!entityId) continue;
-    const extractionsCount = Array.isArray(extraction.extractions)
-      ? extraction.extractions.length
-      : 0;
-    if (extractionsCount === 0) continue;
-    counts[entityId] = (counts[entityId] ?? 0) + extractionsCount;
+    counts[entityId] = (counts[entityId] ?? 0) + 1;
   }
 
   return counts;

src/payload-types.ts

@@ -448,6 +448,9 @@ export interface HeroBlock {
    * Displayed alongside the political entity name in the hero.
    */
   tagline?: string | null;
+  /**
+   * Label displayed beside the total count of synced promises.
+   */
   promiseLabel?: string | null;
   /**
    * Sentence that follows the promise count, for example 'tracked on PromiseTracker'.