Render get invloved block

apps/codeforafrica/src/components/GetInvolved/GetInvolved.js

@@ -7,7 +7,7 @@ import React from "react";
 import ImpactCardList from "@/codeforafrica/components/ImpactCardList";
 
 const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
-  const { list, action, sx } = props;
+  const { impacts, action, sx } = props;
 
   if (!action?.href?.length) {
     return null;
@@ -26,7 +26,7 @@ const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
           py: { xs: 5, sm: 10, md: 4, lg: 12.5 },
         }}
       >
-        <ImpactCardList list={list} />
+        <ImpactCardList list={impacts} />
         <Button
           variant="contained"
           component={Link}
@@ -39,20 +39,20 @@ const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
             width: { xs: "100%", sm: "fit-content" },
           }}
         >
-          {action.content || action.href}
+          {action.label}
         </Button>
       </Section>
     </Box>
   );
 });
 
 GetInvolved.propTypes = {
-  list: PropTypes.arrayOf(PropTypes.shape({})),
+  impacts: PropTypes.arrayOf(PropTypes.shape({})),
   action: PropTypes.shape({}),
 };
 
 GetInvolved.defaultProps = {
-  list: undefined,
+  impacts: undefined,
   action: undefined,
 };
 

apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js

@@ -47,6 +47,15 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
               >
                 15000
               </div>
+              <div
+                class="MuiBox-root css-2ligbh"
+              >
+                <span
+                  class="MuiTypography-root MuiTypography-body3 css-s9m4rs-MuiTypography-root"
+                >
+                  Our team makes an impact in more than 20 countries where members are present.
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -55,9 +64,7 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1utjjui-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/contact"
         tabindex="0"
-      >
-        Get Involved
-      </a>
+      />
     </div>
   </div>
 </div>

apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js

@@ -9,19 +9,27 @@ import theme from "@/codeforafrica/theme";
 const render = createRender({ theme });
 
 const defaultProps = {
-  list: [
+  impacts: [
     {
       title: "Beneficiaries trained",
       value: 15000,
       image: {
         src: "/images/Type=layout,%20Size=32,%20Color=1020E1.svg",
       },
-      content:
-        "In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space.",
+      description: [
+        {
+          children: [
+            {
+              text: "Our team makes an impact in more than 20 countries where members are present.",
+              children: null,
+            },
+          ],
+        },
+      ],
     },
   ],
   action: {
-    content: "Get Involved",
+    lable: "Get Involved",
     href: "/contact",
   },
 };

apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js

@@ -41,6 +41,15 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
           >
             15000
           </div>
+          <div
+            class="MuiBox-root css-2ligbh"
+          >
+            <span
+              class="MuiTypography-root MuiTypography-body3 css-s9m4rs-MuiTypography-root"
+            >
+              Our team makes an impact in more than 20 countries where members are present.
+            </span>
+          </div>
         </div>
       </div>
     </div>

apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.test.js

@@ -16,8 +16,16 @@ const defaultProps = {
       image: {
         src: "/images/Type=layout,%20Size=32,%20Color=1020E1.svg",
       },
-      content:
-        "In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space.",
+      description: [
+        {
+          children: [
+            {
+              text: "Our team makes an impact in more than 20 countries where members are present.",
+              children: null,
+            },
+          ],
+        },
+      ],
     },
   ],
 };

apps/codeforafrica/src/lib/data/blockify/get-involved.js

@@ -0,0 +1,22 @@
+import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
+
+function getInvolved(block) {
+  const { impacts, ...other } = block;
+  const ourImpacts = impacts.map((impact) => {
+    const { icon: media, title, ...rest } = impact;
+    const image = imageFromMedia({ alt: title, ...media });
+    return {
+      ...rest,
+      image,
+      title,
+    };
+  });
+
+  return {
+    ...other,
+    impacts: ourImpacts,
+    slug: "get-involved",
+  };
+}
+
+export default getInvolved;

apps/codeforafrica/src/lib/data/blockify/index.js

@@ -1,9 +1,11 @@
+import getInvolved from "./get-involved";
 import hero from "./hero";
 import ourImpact from "./our-impact";
 
 const propsifyBlockBySlug = {
   hero,
   "our-impact": ourImpact,
+  "get-involved": getInvolved,
 };
 
 async function blockify(blocks) {

apps/codeforafrica/src/payload/blocks/GetInvolved.js

@@ -1,13 +1,28 @@
-import impact from "../fields/impact";
+import impacts from "../fields/impacts";
+import link from "../fields/links/link";
 
 const GetInvolved = {
   slug: "get-involved",
   imageURL: "/images/cms/blocks/get_involved.jpg",
   imageAltText: "Our Impact Statisctics",
   fields: [
-    impact({
+    impacts({
       minRows: 3,
     }),
+    {
+      name: "action",
+      label: "Action",
+      type: "group",
+      fields: [
+        {
+          name: "label",
+          label: "Label",
+          type: "text",
+          required: true,
+        },
+        link({}),
+      ],
+    },
   ],
 };