diff --git a/apps/codeforafrica/public/images/cms/blocks/get_involved.jpg b/apps/codeforafrica/public/images/cms/blocks/get_involved.jpg
new file mode 100644
index 000000000..e0759fe80
Binary files /dev/null and b/apps/codeforafrica/public/images/cms/blocks/get_involved.jpg differ
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..f824ab1a4 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.
+
+
diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.test.js
index d0fbd6634..60263bf9b 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",
+ label: "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..46ea5c310
--- /dev/null
+++ b/apps/codeforafrica/src/lib/data/blockify/get-involved.js
@@ -0,0 +1,14 @@
+import formatImpacts from "@/codeforafrica/lib/data/utils/impacts";
+
+function getInvolved(block) {
+ const { impacts, ...other } = block;
+ const ourImpacts = formatImpacts(impacts);
+
+ 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/lib/data/blockify/our-impact.js b/apps/codeforafrica/src/lib/data/blockify/our-impact.js
index c5e53b4e9..98a2f5133 100644
--- a/apps/codeforafrica/src/lib/data/blockify/our-impact.js
+++ b/apps/codeforafrica/src/lib/data/blockify/our-impact.js
@@ -1,16 +1,8 @@
-import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
+import formatImpacts from "@/codeforafrica/lib/data/utils/impacts";
function ourImpact(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,
- };
- });
+ const ourImpacts = formatImpacts(impacts);
return {
...other,
diff --git a/apps/codeforafrica/src/lib/data/utils/impacts.js b/apps/codeforafrica/src/lib/data/utils/impacts.js
new file mode 100644
index 000000000..08357c4e1
--- /dev/null
+++ b/apps/codeforafrica/src/lib/data/utils/impacts.js
@@ -0,0 +1,13 @@
+import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
+
+export default function formatImpacts(impacts) {
+ return impacts.map((impact) => {
+ const { icon: media, title, ...rest } = impact;
+ const image = imageFromMedia({ alt: title, ...media });
+ return {
+ ...rest,
+ image,
+ title,
+ };
+ });
+}
diff --git a/apps/codeforafrica/src/payload/blocks/GetInvolved.js b/apps/codeforafrica/src/payload/blocks/GetInvolved.js
new file mode 100644
index 000000000..28fb24395
--- /dev/null
+++ b/apps/codeforafrica/src/payload/blocks/GetInvolved.js
@@ -0,0 +1,17 @@
+import impacts from "../fields/impacts";
+import linkGroup from "../fields/links/linkGroup";
+
+const GetInvolved = {
+ slug: "get-involved",
+ imageURL: "/images/cms/blocks/get_involved.jpg",
+ imageAltText: "Get Involved",
+ fields: [
+ impacts({
+ minRows: 3,
+ maxRows: 3,
+ }),
+ linkGroup({ overrides: { name: "action", label: "Action" } }),
+ ],
+};
+
+export default GetInvolved;
diff --git a/apps/codeforafrica/src/payload/collections/Pages.js b/apps/codeforafrica/src/payload/collections/Pages.js
index b7f1bf7b3..41d0fca12 100644
--- a/apps/codeforafrica/src/payload/collections/Pages.js
+++ b/apps/codeforafrica/src/payload/collections/Pages.js
@@ -1,6 +1,7 @@
import CustomPageHeader from "../blocks/CustomPageHeader";
import Error from "../blocks/Error";
import GetInTouch from "../blocks/GetInTouch";
+import GetInvolved from "../blocks/GetInvolved";
import Hero from "../blocks/Hero";
import OurImpact from "../blocks/OurImpact";
import OurPartners from "../blocks/OurPartners";
@@ -42,10 +43,11 @@ const Pages = {
blocks: [
Error,
GetInTouch,
+ GetInvolved,
Hero,
- OurImpact,
PageHeader,
CustomPageHeader,
+ OurImpact,
OurPartners,
],
admin: {