Add Our impact block

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

@@ -47,11 +47,6 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
               >
                 15000
               </div>
-              <div
-                class="MuiTypography-root MuiTypography-body3 css-51w9j7-MuiTypography-root"
-              >
-                In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space.
-              </div>
             </div>
           </div>
         </div>

apps/codeforafrica/src/components/ImpactCard/ImpactCard.js

@@ -4,6 +4,8 @@ import { styled } from "@mui/material/styles";
 import PropTypes from "prop-types";
 import React from "react";
 
+import RichText from "@/codeforafrica/components/RichText";
+
 const ImpactCardRoot = styled(Card, {
   slot: "Root",
 })(({ theme: { breakpoints } }) => ({
@@ -19,7 +21,7 @@ const ImpactCardRoot = styled(Card, {
 }));
 
 const ImpactCard = React.forwardRef(function ImpactCard(props, ref) {
-  const { image, title, value, content } = props;
+  const { image, title, value, description } = props;
 
   if (!(image && title)) {
     return null;
@@ -72,22 +74,21 @@ const ImpactCard = React.forwardRef(function ImpactCard(props, ref) {
         >
           {value}
         </RichTypography>
-        <RichTypography
+        <RichText
+          elements={description}
           sx={{
             display: "block",
             pt: "10px",
           }}
           variant="body3"
-        >
-          {content}
-        </RichTypography>
+        />
       </CardContent>
     </ImpactCardRoot>
   );
 });
 
 ImpactCard.propTypes = {
-  content: PropTypes.string,
+  description: PropTypes.arrayOf(PropTypes.shape({})),
   title: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   image: PropTypes.shape({
@@ -97,7 +98,7 @@ ImpactCard.propTypes = {
 };
 
 ImpactCard.defaultProps = {
-  content: undefined,
+  description: undefined,
   title: undefined,
   value: undefined,
   image: undefined,

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

@@ -36,9 +36,13 @@ exports[`<ImpactCard /> renders unchanged 1`] = `
         15000
       </div>
       <div
-        class="MuiTypography-root MuiTypography-body3 css-51w9j7-MuiTypography-root"
+        class="MuiBox-root css-2ligbh"
       >
-        In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space.
+        <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>

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

@@ -14,8 +14,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,
+        },
+      ],
+    },
+  ],
 };
 
 describe("<ImpactCard />", () => {

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

@@ -41,11 +41,6 @@ exports[`<ImpactCardList /> renders unchanged 1`] = `
           >
             15000
           </div>
-          <div
-            class="MuiTypography-root MuiTypography-body3 css-51w9j7-MuiTypography-root"
-          >
-            In 10 years, 15 000 trainees have learned new skills and knowledge within the civic tech and media space.
-          </div>
         </div>
       </div>
     </div>

apps/codeforafrica/src/components/OurImpact/OurImpact.js

@@ -7,9 +7,9 @@ import React from "react";
 import ImpactCardList from "@/codeforafrica/components/ImpactCardList";
 
 const OurImpact = React.forwardRef(function OurImpact(props, ref) {
-  const { list, title, sx } = props;
+  const { impacts, title, sx } = props;
 
-  if (!list?.length) {
+  if (!impacts?.length) {
     return null;
   }
   return (
@@ -36,19 +36,19 @@ const OurImpact = React.forwardRef(function OurImpact(props, ref) {
             {title}
           </RichTypography>
         )}
-        <ImpactCardList list={list} />
+        <ImpactCardList list={impacts} />
       </Section>
     </Box>
   );
 });
 
 OurImpact.propTypes = {
-  list: PropTypes.arrayOf(PropTypes.shape({})),
+  impacts: PropTypes.arrayOf(PropTypes.shape({})),
   title: PropTypes.string,
 };
 
 OurImpact.defaultProps = {
-  list: undefined,
+  impacts: undefined,
   title: undefined,
 };
 

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

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

apps/codeforafrica/src/lib/data/blockify/our-impact.js

@@ -0,0 +1,22 @@
+import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
+
+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,
+    };
+  });
+
+  return {
+    ...other,
+    impacts: ourImpacts,
+    slug: "our-impact",
+  };
+}
+
+export default ourImpact;

apps/codeforafrica/src/pages/[...slugs].page.js

@@ -7,6 +7,7 @@ import GetInvolved from "@/codeforafrica/components/GetInvolved";
 import Hero from "@/codeforafrica/components/Hero";
 import MeetOurTeam from "@/codeforafrica/components/MeetOurTeam";
 import NewsAndStories from "@/codeforafrica/components/NewsAndStories";
+import OurImpact from "@/codeforafrica/components/OurImpact";
 import OurPartners from "@/codeforafrica/components/OurPartners";
 import PageHeader from "@/codeforafrica/components/PageHeader";
 import { getPageServerSideProps } from "@/codeforafrica/lib/data";
@@ -17,7 +18,8 @@ const componentsBySlugs = {
   "custom-page-header": CustomPageHeader,
   "meet-our-team": MeetOurTeam,
   "news-stories": NewsAndStories,
-  "our-impact": GetInvolved,
+  "get-involved": GetInvolved,
+  "our-impact": OurImpact,
   "our-partners": OurPartners,
   projects: FeaturedProjects,
 };

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

@@ -0,0 +1,20 @@
+import impacts from "../fields/impacts";
+
+const OurImpact = {
+  slug: "our-impact",
+  imageURL: "/images/cms/blocks/our_impact.jpg",
+  imageAltText: "Show Our Impact",
+  fields: [
+    {
+      name: "title",
+      label: "Title",
+      type: "text",
+      required: true,
+    },
+    impacts({
+      minRows: 1,
+    }),
+  ],
+};
+
+export default OurImpact;

apps/codeforafrica/src/payload/collections/Pages.js

@@ -1,6 +1,7 @@
 import CustomPageHeader from "../blocks/CustomPageHeader";
 import Error from "../blocks/Error";
 import Hero from "../blocks/Hero";
+import OurImpact from "../blocks/OurImpact";
 import OurPartners from "../blocks/OurPartners";
 import PageHeader from "../blocks/PageHeader";
 import fullTitle from "../fields/fullTitle";
@@ -37,7 +38,14 @@ const Pages = {
       // each other e.g. while alphabecially CustomPageHeader should be with C,
       // it's functiaonally equivalent with PageHeader so we keep it next to
       // PageHeader
-      blocks: [Error, Hero, PageHeader, CustomPageHeader, OurPartners],
+      blocks: [
+        Error,
+        Hero,
+        OurImpact,
+        PageHeader,
+        CustomPageHeader,
+        OurPartners,
+      ],
       admin: {
         initCollapsed: true,
       },