From 061665abd220413d9110701fd0c021ab129a1769 Mon Sep 17 00:00:00 2001
From: Shyam Patel <72148710+shyam0705@users.noreply.github.com>
Date: Tue, 23 May 2023 12:50:17 +0530
Subject: [PATCH] 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       |  3 +++
 components/event/EventKey.js        | 15 ++++++++++++++-
 components/user/UserEvents.js       |  2 ++
 pages/docs/how-to-guides/events.mdx |  4 ++++
 pages/events.js                     | 18 ++++++++++++++++++
 5 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/components/event/EventCard.js b/components/event/EventCard.js
index e58775de297..74f1b25f0d7 100644
--- a/components/event/EventCard.js
+++ b/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">
diff --git a/components/event/EventKey.js b/components/event/EventKey.js
index a9eee96b442..4de6c5fa9f1 100644
--- a/components/event/EventKey.js
+++ b/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",
diff --git a/components/user/UserEvents.js b/components/user/UserEvents.js
index 63d998698fd..cb4b418f2b3 100644
--- a/components/user/UserEvents.js
+++ b/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)),
diff --git a/pages/docs/how-to-guides/events.mdx b/pages/docs/how-to-guides/events.mdx
index 85dad67c124..dc63bc1cee7 100644
--- a/pages/docs/how-to-guides/events.mdx
+++ b/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                            |
 | :---------------- | :------- | :------------------------------------- |
diff --git a/pages/events.js b/pages/events.js
index 0679080adbb..a65ac463e19 100644
--- a/pages/events.js
+++ b/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");