diff --git a/apps/codeforafrica/payload.config.ts b/apps/codeforafrica/payload.config.ts index 02820279d..f0486672a 100644 --- a/apps/codeforafrica/payload.config.ts +++ b/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, diff --git a/apps/codeforafrica/public/images/cms/blocks/our_offices.png b/apps/codeforafrica/public/images/cms/blocks/our_offices.png new file mode 100644 index 000000000..140ebec9b Binary files /dev/null and b/apps/codeforafrica/public/images/cms/blocks/our_offices.png differ diff --git a/apps/codeforafrica/src/components/AddressCard/AddressCard.js b/apps/codeforafrica/src/components/AddressCard/AddressCard.js index cc1c87aa7..1d6c6b207 100644 --- a/apps/codeforafrica/src/components/AddressCard/AddressCard.js +++ b/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) { - {title} + {city} as a line i.e.no margins. sx={{ color: "inherit", pt: 1.25, "& p": { m: 0 } }} variant="body3" > - {content} + {addressLine1} + + + {addressLine2} + + + {zipCode} + {zipCode ? "," : null} + + + {city} + + + {country} diff --git a/apps/codeforafrica/src/components/OfficeAddresses/OfficeAddresses.js b/apps/codeforafrica/src/components/OfficeAddresses/OfficeAddresses.js index 6b23a306b..80625192b 100644 --- a/apps/codeforafrica/src/components/OfficeAddresses/OfficeAddresses.js +++ b/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 ( - + - +
diff --git a/apps/codeforafrica/src/lib/data/blockify/index.js b/apps/codeforafrica/src/lib/data/blockify/index.js index b144c8679..c91c92650 100644 --- a/apps/codeforafrica/src/lib/data/blockify/index.js +++ b/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, }; diff --git a/apps/codeforafrica/src/lib/data/blockify/ourOffices.js b/apps/codeforafrica/src/lib/data/blockify/ourOffices.js new file mode 100644 index 000000000..3df1fa1c8 --- /dev/null +++ b/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; diff --git a/apps/codeforafrica/src/pages/[...slugs].page.js b/apps/codeforafrica/src/pages/[...slugs].page.js index d04a47ca2..fe5b244fa 100644 --- a/apps/codeforafrica/src/pages/[...slugs].page.js +++ b/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, diff --git a/apps/codeforafrica/src/payload/blocks/OurOffices.js b/apps/codeforafrica/src/payload/blocks/OurOffices.js new file mode 100644 index 000000000..4aab1c27c --- /dev/null +++ b/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; diff --git a/apps/codeforafrica/src/payload/collections/Offices.js b/apps/codeforafrica/src/payload/collections/Offices.js new file mode 100644 index 000000000..5a25085b0 --- /dev/null +++ b/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; diff --git a/apps/codeforafrica/src/payload/collections/Pages.js b/apps/codeforafrica/src/payload/collections/Pages.js index be42022a4..b17bd002c 100644 --- a/apps/codeforafrica/src/payload/collections/Pages.js +++ b/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,