Ft/codeforafrica get in touch

apps/codeforafrica/src/components/GetInTouch/GetInTouch.js

@@ -8,7 +8,7 @@ import TwoToneBackground from "@/codeforafrica/components/TwoToneBackground";
 
 const GetInTouch = React.forwardRef(function GetInTouch(props, ref) {
   const {
-    action: { href, content },
+    action: { href, label },
     subtitle,
     title,
     sx,
@@ -59,7 +59,7 @@ const GetInTouch = React.forwardRef(function GetInTouch(props, ref) {
               },
             }}
           >
-            {content}
+            {label}
           </Button>
         </Stack>
       </Section>

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

@@ -36,6 +36,7 @@ exports[`<GetInTouch /> renders unchanged 1`] = `
               viewbox="0 0 24 24"
             />
           </span>
+          Get in touch
         </a>
       </div>
     </div>

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

@@ -0,0 +1,15 @@
+import { actionFromActionButton } from "@/codeforafrica/lib/data/utils";
+
+function getInTouch(block) {
+  const { actionButton, ...other } = block;
+
+  const action = actionFromActionButton({ ...actionButton });
+
+  return {
+    ...other,
+    action,
+    slug: "get-in-touch",
+  };
+}
+
+export default getInTouch;

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

@@ -1,7 +1,9 @@
+import getInTouch from "./getInTouch";
 import hero from "./hero";
 
 const propsifyBlockBySlug = {
   hero,
+  "get-in-touch": getInTouch,
 };
 
 async function blockify(blocks) {

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

@@ -37,6 +37,6 @@ export const api = {
 export async function getPageStaticProps(context) {
   const props = await getPageProps(api, context);
   return {
-    props,
+    props: props || {},
   };
 }

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

@@ -1,5 +1,7 @@
 export function imageFromMedia({ alt = null, url = null }) {
   return { alt, src: url };
 }
-
+export function actionFromActionButton({ href, label, newTab = false }) {
+  return { href, label, newTab };
+}
 export default undefined;

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

@@ -1,6 +1,8 @@
 import React from "react";
 import { SWRConfig } from "swr";
 
+import GetInTouch from "../components/GetInTouch/GetInTouch";
+
 import CustomPageHeader from "@/codeforafrica/components/CustomPageHeader";
 import FeaturedProjects from "@/codeforafrica/components/FeaturedProjects";
 import GetInvolved from "@/codeforafrica/components/GetInvolved";
@@ -13,6 +15,7 @@ import { getPageServerSideProps } from "@/codeforafrica/lib/data";
 
 const componentsBySlugs = {
   hero: Hero,
+  "get-in-touch": GetInTouch,
   "page-header": PageHeader,
   "custom-page-header": CustomPageHeader,
   "meet-our-team": MeetOurTeam,

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

@@ -0,0 +1,37 @@
+import link from "../fields/links/link";
+
+const GetInTouch = {
+  slug: "get-in-touch",
+  imageURL: "/images/cms/blocks/get_in_touch.jpg",
+  imageAltText: "Display Get In Touch Call to Action",
+  fields: [
+    {
+      name: "title",
+      label: "Title",
+      required: true,
+      type: "text",
+    },
+    {
+      name: "subtitle",
+      label: "Sub Title",
+      required: true,
+      type: "text",
+    },
+    {
+      name: "actionButton",
+      label: "Action Button",
+      type: "group",
+      fields: [
+        {
+          name: "label",
+          label: "Label",
+          type: "text",
+          required: true,
+        },
+        link({}),
+      ],
+    },
+  ],
+};
+
+export default GetInTouch;

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

@@ -1,5 +1,6 @@
 import CustomPageHeader from "../blocks/CustomPageHeader";
 import Error from "../blocks/Error";
+import GetInTouch from "../blocks/GetInTouch";
 import Hero from "../blocks/Hero";
 import OurPartners from "../blocks/OurPartners";
 import PageHeader from "../blocks/PageHeader";
@@ -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,
+        GetInTouch,
+        Hero,
+        PageHeader,
+        CustomPageHeader,
+        OurPartners,
+      ],
       admin: {
         initCollapsed: true,
       },