feat: filter to show free and paid events (#4759)

* Added filter to show free and paid events

* Move import position for tb coin icon

---------

Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>

components/event/EventCard.js

@@ -5,6 +5,7 @@ import {
   MdOutlineArrowRightAlt,
 } from "react-icons/md";
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import { TbCoin, TbCoinOff } from "react-icons/tb";
 
 import Link from "@components/Link";
 import FallbackImage from "@components/FallbackImage";
@@ -33,6 +34,8 @@ export default function EventCard({ event, username }) {
             new Date(event.date.cfpClose) > new Date() && (
               <FaMicrophoneAlt title="CFP is open" />
             )}
+          {event.price?.startingFrom > 0 && <TbCoin title="Paid event" />}
+          {event.price?.startingFrom === 0 && <TbCoinOff title="Free event" />}
         </div>
         <div className="flex-1 space-y-1 p-4">
           <div className="flex items-center justify-between">

components/event/EventKey.js

@@ -1,5 +1,6 @@
 import { IconContext } from "react-icons";
-import { FaMicrophoneAlt } from "react-icons/fa";
+import { FaListUl, FaMicrophoneAlt } from "react-icons/fa";
+import { TbCoin, TbCoinOff } from "react-icons/tb";
 import {
   MdOutlineOnlinePrediction,
   MdOutlinePeople,
@@ -40,6 +41,18 @@ export default function EventKey({ categorisedEvents, onToggleEventType }) {
       key: "virtual",
       icon: MdOutlineOnlinePrediction,
     },
+    {
+      title: "Free",
+      description: "These events are free to attend",
+      key: "free",
+      icon: TbCoinOff,
+    },
+    {
+      title: "Paid",
+      description: "These events are paid to attend",
+      key: "paid",
+      icon: TbCoin,
+    },
     {
       title: "Past Events",
       description: "Events already held",

components/user/UserEvents.js

@@ -22,6 +22,8 @@ export default function UserEvents({ data }) {
     cfpOpen: futureEvents.filter((event) =>
       event.date.cfpClose ? new Date(event.date.cfpClose) > new Date() : false
     ),
+    free: data.events.filter((event) => event.price?.startingFrom === 0),
+    paid: data.events.filter((event) => event.price?.startingFrom > 0),
     past: data.events
       .filter((event) => new Date(event.date.end) < new Date())
       .sort((a, b) => new Date(b.date.start) - new Date(a.date.start)),

pages/docs/how-to-guides/events.mdx

@@ -36,6 +36,9 @@ _If you need help on how to edit this file, please see the <Link href="/docs/how
     "cfpClose": "2022-10-09T17:00:00.000+00:00"
   },
   "url": "https://www.youtube.com/watch?v=iqIFD02OkVE",
+  "price": {
+    "startingFrom": 0
+  },
   "location": {
     "road": "Messe Berlin South Entrance & CityCube",
     "city": "Jafféstrasse",
@@ -60,6 +63,7 @@ _If you need help on how to edit this file, please see the <Link href="/docs/how
 | location               | true/false | Address of the event venue (required only when `isInPerson` is true) |
 | userStatus             | false      | What your role is at the event                                       |
 | speakingTopic          | false      | The topic of the event                                               |
+| price                  | false    | What is the cost to attend event in USD.                    |
 
 | Location property | Required | Description                            |
 | :---------------- | :------- | :------------------------------------- |

pages/events.js

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { FaListUl, FaMicrophoneAlt } from "react-icons/fa";
 import { MdOutlineOnlinePrediction, MdOutlinePeople } from "react-icons/md";
+import { TbCoin, TbCoinOff } from "react-icons/tb";
+
 import { getEvents } from "./api/events";
 
 import logger from "@config/logger";
@@ -47,6 +49,8 @@ export default function Events({ events }) {
     cfpOpen: events.filter((event) =>
       event.date.cfpClose ? new Date(event.date.cfpClose) > new Date() : false
     ),
+    free: events.filter((event) => event.price?.startingFrom === 0),
+    paid: events.filter((event) => event.price?.startingFrom > 0),
   };
   const tabFilters = [
     {
@@ -77,6 +81,20 @@ export default function Events({ events }) {
       icon: MdOutlineOnlinePrediction,
       total: categorizedEvents.virtual.length,
     },
+    {
+      title: "Free",
+      description: "These events are free to attend",
+      key: "free",
+      icon: TbCoinOff,
+      total: categorisedEvents.free.length,
+    },
+    {
+      title: "Paid",
+      description: "These events are paid to attend",
+      key: "paid",
+      icon: TbCoin,
+      total: categorisedEvents.paid.length,
+    },
   ];
 
   const [eventType, setEventType] = useState("all");