diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.js
index 1d4796ed2..92ae75ead 100644
--- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.js
+++ b/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 },
}}
>
-
+
@@ -47,12 +47,12 @@ const GetInvolved = React.forwardRef(function GetInvolved(props, ref) {
});
GetInvolved.propTypes = {
- list: PropTypes.arrayOf(PropTypes.shape({})),
+ impacts: PropTypes.arrayOf(PropTypes.shape({})),
action: PropTypes.shape({}),
};
GetInvolved.defaultProps = {
- list: undefined,
+ impacts: undefined,
action: undefined,
};
diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
index 072057c34..7db519367 100644
--- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
+++ b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
@@ -47,6 +47,15 @@ exports[` renders unchanged 1`] = `
>
15000
+
+
+ Our team makes an impact in more than 20 countries where members are present.
+
+
@@ -55,9 +64,7 @@ exports[` 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
-
+ />
diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js
index d0fbd6634..c354fde47 100644
--- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js
+++ b/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",
},
};
diff --git a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
index ad09c8d89..2eb50f825 100644
--- a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
+++ b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.snap.js
@@ -41,6 +41,15 @@ exports[` renders unchanged 1`] = `
>
15000
+
+
+ Our team makes an impact in more than 20 countries where members are present.
+
+
diff --git a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.test.js b/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.test.js
index e67879744..b81e90e6c 100644
--- a/apps/codeforafrica/src/components/ImpactCardList/ImpactCardList.test.js
+++ b/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,
+ },
+ ],
+ },
+ ],
},
],
};
diff --git a/apps/codeforafrica/src/lib/data/blockify/get-involved.js b/apps/codeforafrica/src/lib/data/blockify/get-involved.js
new file mode 100644
index 000000000..9ec783037
--- /dev/null
+++ b/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;
diff --git a/apps/codeforafrica/src/lib/data/blockify/index.js b/apps/codeforafrica/src/lib/data/blockify/index.js
index 9297d0f7f..206e1b93a 100644
--- a/apps/codeforafrica/src/lib/data/blockify/index.js
+++ b/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) {
diff --git a/apps/codeforafrica/src/payload/blocks/GetInvolved.js b/apps/codeforafrica/src/payload/blocks/GetInvolved.js
index 1ca0fae82..1cbfc9b7a 100644
--- a/apps/codeforafrica/src/payload/blocks/GetInvolved.js
+++ b/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({}),
+ ],
+ },
],
};