Merge branch 'develop' into ft/codeforafrica-team-infoghraphic

apps/codeforafrica/payload.config.ts

@@ -1,6 +1,7 @@
 import path from "path";
 
 import { buildConfig } from "payload/config";
+import Impact from "./src/payload/collections/Impact";
 import Media from "./src/payload/collections/Media";
 import Pages from "./src/payload/collections/Pages";
 import Partners from "./src/payload/collections/Partners";
@@ -30,7 +31,7 @@ const adapter = s3Adapter({
 
 export default buildConfig({
   serverURL: appURL,
-  collections: [Pages, Media, Partners] as CollectionConfig[],
+  collections: [Impact, Pages, Media, Partners] as CollectionConfig[],
   globals: [Settings] as GlobalConfig[],
   admin: {
     css: path.resolve(__dirname, "./src/payload/admin/scss/custom.scss"),

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,9 +1,11 @@
 import hero from "./hero";
 import meetOurTeam from "./meetOurTeam";
+import ourImpact from "./our-impact";
 
 const propsifyBlockBySlug = {
   hero,
   "meet-our-team": meetOurTeam,
+  "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/lib/data/common/index.js

@@ -44,12 +44,111 @@ function getPageSlug({ params }) {
   return params?.slugs?.[pageSlugIndex] || "index";
 }
 
+function getDefaultErrorPageProps(slug = "404") {
+  if (slug === "500") {
+    return {
+      title: "Server Error. ",
+      subtitle: [
+        {
+          children: [
+            {
+              text: "Don't worry!, you can head back to our ",
+              children: null,
+            },
+            {
+              type: "link",
+              newTab: false,
+              url: "/",
+              children: [
+                {
+                  text: "homepage",
+                  children: null,
+                },
+              ],
+              href: "/",
+            },
+            {
+              text: "check out our most recent ",
+              children: null,
+            },
+            {
+              type: "link",
+              newTab: false,
+              url: "/projects",
+              children: [
+                {
+                  text: "projects",
+                  children: null,
+                },
+              ],
+              href: "/projects",
+            },
+            {
+              text: ", or read below some of the contents produced by our amazing team while the technical team is working on fixing the issue.",
+              children: null,
+            },
+          ],
+        },
+      ],
+    };
+  }
+
+  return {
+    title: "Whoops! This page got lost in conversation! ",
+    subtitle: [
+      {
+        children: [
+          {
+            text: "Don't worry!, you can head back to our ",
+            children: null,
+          },
+          {
+            type: "link",
+            newTab: false,
+            url: "/",
+            children: [
+              {
+                text: "homepage",
+                children: null,
+              },
+            ],
+            href: "/",
+          },
+          {
+            text: "check out our most recent ",
+            children: null,
+          },
+          {
+            type: "link",
+            newTab: false,
+            url: "/projects",
+            children: [
+              {
+                text: "projects",
+                children: null,
+              },
+            ],
+            href: "/projects",
+          },
+          {
+            text: ", or read below some of the contents produced by our amazing team.",
+            children: null,
+          },
+        ],
+      },
+    ],
+  };
+}
+
 export async function getPageProps(api, context) {
   const slug = getPageSlug(context);
   const {
     docs: [page],
   } = await api.findPage(slug);
   if (!page) {
+    if (["404", "500"].includes(slug)) {
+      return getDefaultErrorPageProps(slug);
+    }
     return null;
   }
 

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/pages/_error.page.js

@@ -6,7 +6,7 @@ function CustomError(props) {
 }
 
 export async function getStaticProps(context) {
-  return getPageStaticProps(context, "/_error");
+  return getPageStaticProps({ ...context, params: { slugs: ["500"] } });
 }
 
 export default CustomError;

apps/codeforafrica/src/pages/_error.test.js

@@ -9,7 +9,7 @@ import theme from "@/codeforafrica/theme";
 const render = createRender({ theme });
 
 const defaultProps = {
-  sections: [],
+  blocks: [],
 };
 
 describe("/404", () => {

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;