Merge pull request #632 from CodeForAfrica/feature/our-addresses

Code for Africa Our offices

apps/codeforafrica/payload.config.ts

@@ -12,6 +12,7 @@ import Authors from "./src/payload/collections/Authors";
 import Donors from "./src/payload/collections/Donors";
 import GuidingPrinciples from "./src/payload/collections/GuidingPrinciples";
 import Impact from "./src/payload/collections/Impact";
+import Offices from "./src/payload/collections/Offices";
 import Media from "./src/payload/collections/Media";
 import Members from "./src/payload/collections/Members";
 import Pages from "./src/payload/collections/Pages";
@@ -58,6 +59,7 @@ export default buildConfig({
     Donors,
     GuidingPrinciples,
     Impact,
+    Offices,
     Media,
     Members,
     Pages,

apps/codeforafrica/src/components/AddressCard/AddressCard.js

@@ -13,14 +13,22 @@ const AddressCardRoot = styled(Card)(({ theme, ownerState }) => ({
 }));
 
 const AddressCard = React.forwardRef(function AddressCard(props, ref) {
-  const { active, content, onClick, title } = props;
+  const {
+    active,
+    addressLine1,
+    addressLine2,
+    zipCode,
+    city,
+    country,
+    onClick,
+  } = props;
   const handleClick = (e) => {
     if (onClick) {
-      onClick(e, title);
+      onClick(e, city);
     }
   };
 
-  if (!(title && content)) {
+  if (!city) {
     return null;
   }
   const ownerState = { active };
@@ -35,15 +43,41 @@ const AddressCard = React.forwardRef(function AddressCard(props, ref) {
       <CardActionArea onClick={handleClick}>
         <CardContent sx={{ p: 0 }}>
           <RichTypography sx={{ color: "inherit" }} variant="body3Underline">
-            {title}
+            {city}
           </RichTypography>
           <RichTypography
-            component="address"
             // In address, we treat <p> as a line i.e.no margins.
             sx={{ color: "inherit", pt: 1.25, "& p": { m: 0 } }}
             variant="body3"
           >
-            {content}
+            {addressLine1}
+          </RichTypography>
+          <RichTypography
+            sx={{ color: "inherit", "& p": { m: 0 } }}
+            variant="body3"
+          >
+            {addressLine2}
+          </RichTypography>
+          <RichTypography
+            sx={{ color: "inherit", "& p": { m: 0 } }}
+            variant="body3"
+            component="span"
+          >
+            {zipCode}
+            {zipCode ? "," : null}
+          </RichTypography>
+          <RichTypography
+            component="span"
+            sx={{ color: "inherit", "& p": { m: 0 } }}
+            variant="body3"
+          >
+            {city}
+          </RichTypography>
+          <RichTypography
+            sx={{ color: "inherit", "& p": { m: 0 } }}
+            variant="body3"
+          >
+            {country}
           </RichTypography>
         </CardContent>
       </CardActionArea>

apps/codeforafrica/src/components/OfficeAddresses/OfficeAddresses.js

@@ -18,14 +18,12 @@ const OfficeAddressesRoot = styled(Box)(({ theme, ownerState }) => ({
 }));
 
 const OfficeAddresses = React.forwardRef(function OfficeAddresses(props, ref) {
-  const { addresses, height = 700, map, title, ...other } = props;
+  const { addresses = [], height = 700, map, title } = props;
   const [activeAddress, setActiveAddress] = React.useState(
     addresses?.[0] ?? null,
   );
-  const handleClickAddress = (_, addressTitle) => {
-    setActiveAddress(
-      addresses.find((address) => address.title === addressTitle),
-    );
+  const handleClickAddress = (_, city) => {
+    setActiveAddress(addresses.find((address) => address.city === city));
   };
 
   if (!addresses?.length) {
@@ -34,7 +32,11 @@ const OfficeAddresses = React.forwardRef(function OfficeAddresses(props, ref) {
   const ownerState = { height };
   const mapStyle = { height, width: "100%", ...map?.style };
   return (
-    <OfficeAddressesRoot {...other} ownerState={ownerState} ref={ref}>
+    <OfficeAddressesRoot
+      sx={{ mt: { xs: 2.5, md: 10 } }}
+      ownerState={ownerState}
+      ref={ref}
+    >
       <Box
         sx={{
           display: { xs: "none", md: "block" },
@@ -46,7 +48,7 @@ const OfficeAddresses = React.forwardRef(function OfficeAddresses(props, ref) {
           zIndex: -1,
         }}
       >
-        <GoogleMap {...map} {...activeAddress?.map} style={mapStyle} />
+        <GoogleMap {...map} {...activeAddress} style={mapStyle} />
       </Box>
       <Section
         sx={{
@@ -85,11 +87,11 @@ const OfficeAddresses = React.forwardRef(function OfficeAddresses(props, ref) {
                 sm={5}
                 md={2}
                 sx={{ order: { xs: 2, md: 0 } }}
-                key={address.title}
+                key={address.city}
               >
                 <AddressCard
                   {...address}
-                  active={address.title === activeAddress.title}
+                  active={address.city === activeAddress.city}
                   onClick={handleClickAddress}
                 />
               </Grid>

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

@@ -4,6 +4,7 @@ import getInvolved from "./get-involved";
 import hero from "./hero";
 import meetOurTeam from "./meetOurTeam";
 import ourImpact from "./our-impact";
+import ourOffices from "./ourOffices";
 import ourTeam from "./ourTeam";
 import ourWork from "./ourWork";
 import posts from "./posts";
@@ -17,6 +18,7 @@ const propsifyBlockBySlug = {
   "our-impact": ourImpact,
   "our-team": ourTeam,
   "our-work": ourWork,
+  "our-offices": ourOffices,
   // post-list to avoid conflict with posts collection in payload
   "post-list": posts,
 };

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

@@ -0,0 +1,35 @@
+function ourOffices(block) {
+  const { offices } = block;
+  const addresses =
+    offices?.map((item) => {
+      let location = null;
+      if (item?.location?.length) {
+        location = {
+          lng: item?.location?.[0],
+          lat: item?.location?.[1],
+        };
+      }
+      return {
+        ...item,
+        position: location,
+        center: location,
+      };
+    }) ?? null;
+  return {
+    ...block,
+    slug: block.blockType,
+    addresses,
+    map: {
+      apiKey: process.env.GOOGLE_API_KEY ?? null,
+      zoom: 20,
+      zoomControl: false,
+      mapTypeControl: false,
+      scaleControl: false,
+      streetViewControl: false,
+      rotateControl: false,
+      fullscreenControl: false,
+    },
+  };
+}
+
+export default ourOffices;

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

@@ -14,6 +14,7 @@ import Hero from "@/codeforafrica/components/Hero";
 import JoinOurSlack from "@/codeforafrica/components/JoinOurSlack";
 import MeetOurTeam from "@/codeforafrica/components/MeetOurTeam";
 import NewsAndStories from "@/codeforafrica/components/NewsAndStories";
+import OfficeAddresses from "@/codeforafrica/components/OfficeAddresses";
 import Opportunities from "@/codeforafrica/components/Opportunities";
 import OurImpact from "@/codeforafrica/components/OurImpact";
 import OurMission from "@/codeforafrica/components/OurMission";
@@ -41,6 +42,7 @@ const componentsBySlugs = {
   "our-guiding-principles": GuidingPrinciplesCardList,
   "our-impact": OurImpact,
   "our-mission": OurMission,
+  "our-offices": OfficeAddresses,
   "our-partners": OurPartners,
   "our-team": OurTeam,
   "our-work": Projects,

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

@@ -0,0 +1,21 @@
+const OurOffices = {
+  slug: "our-offices",
+  imageURL: "/images/cms/blocks/our_offices.png",
+  imageAltText: "Our offices",
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+    },
+    {
+      hasMany: true,
+      type: "relationship",
+      relationTo: "offices",
+      name: "offices",
+      required: true,
+    },
+  ],
+};
+
+export default OurOffices;

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

@@ -0,0 +1,42 @@
+import { allCountries } from "../../lib/data/json/countries";
+
+const Offices = {
+  slug: "offices",
+  admin: {
+    group: "Organisation",
+    defaultColumns: ["city", "country"],
+    useAsTitle: "city",
+  },
+  fields: [
+    {
+      name: "city",
+      type: "text",
+      required: true,
+    },
+    {
+      name: "location",
+      type: "point",
+      label: "Location",
+      required: true,
+    },
+    {
+      name: "addressLine1",
+      type: "text",
+    },
+    {
+      name: "addressLine2",
+      type: "text",
+    },
+    {
+      name: "zipCode",
+      type: "text",
+    },
+    {
+      name: "country",
+      type: "select",
+      options: allCountries,
+    },
+  ],
+};
+
+export default Offices;

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

@@ -11,6 +11,7 @@ import JoinOurSlack from "../blocks/JoinOurSlack";
 import MeetOurTeam from "../blocks/MeetOurTeam";
 import OurImpact from "../blocks/OurImpact";
 import OurMission from "../blocks/OurMission";
+import OurOffices from "../blocks/OurOffices";
 import OurPartners from "../blocks/OurPartners";
 import OurTeam from "../blocks/OurTeam";
 import OurWork from "../blocks/OurWork";
@@ -63,6 +64,7 @@ const Pages = {
         PageHeader,
         Posts,
         CustomPageHeader,
+        OurOffices,
         OurImpact,
         OurMission,
         OurPartners,