feat: private events (#24)

## Description

- Now is possible to set up an event as private (default public)
- The status of an event will be visible inside the event details

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

*All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues.*

I have...

- [x] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
  in the PR title
- [ ] targeted the correct branch
- [ ] provided a link to the relevant issue or specification
- [ ] reviewed "Files changed" and left comments if necessary
- [ ] confirmed all CI checks have passed

### Reviewers Checklist

*All items are required. Please add a note if the item is not applicable
and please add
your handle next to the items reviewed if you only reviewed selected
items.*

I have...

- [ ] confirmed the
correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [ ] confirmed all author checklist items have been addressed

app/creator/create/BondscapeSwitch.tsx

@@ -0,0 +1,40 @@
+import { InputSwitch } from "primereact/inputswitch";
+import React, { useState } from "react";
+
+interface Props {
+  readonly title: string;
+  readonly value?: boolean;
+  readonly onChange?: (value: boolean) => void;
+  readonly required?: boolean;
+}
+
+const BondscapeSwitch = ({ title, value, onChange, required }: Props) => {
+  const [isChecked, setIsChecked] = useState(value || false);
+  return (
+    <div className="flex flex-1 flex-row bg-bondscape-text_neutral_100 gap-2 px-[1rem] rounded-[16px] items-center">
+      <div className="flex w-[130px]">
+        <label className="text-[16px] text-bondscape-text_neutral_900">
+          {title}
+        </label>
+        {required && <span className="ml-1 text-[#FF8686]">*</span>}
+      </div>
+      <InputSwitch
+        pt={{
+          // @ts-ignore
+          slider: ({ props }) => ({
+            className: props.checked
+              ? "bg-bondscape-primary"
+              : "bg-bondscape-text_neutral_300",
+          }),
+        }}
+        checked={isChecked}
+        onChange={(e) => {
+          setIsChecked(e.value);
+          onChange && onChange(e.value);
+        }}
+      />
+    </div>
+  );
+};
+
+export default BondscapeSwitch;

app/creator/create/[[...id]]/MainSection.tsx

@@ -4,6 +4,7 @@ import BondscapeDateTimePicker from "@/creator/create/BondscapeDateTimePicker/Bo
 import BondscapeSelectCategory from "@/creator/create/BondscapeSelectCategory";
 import BondscapeSelectCoHosts from "@/creator/create/BondscapeSelectCoHosts";
 import BondscapeSelectTags from "@/creator/create/BondscapeSelectTags";
+import BondscapeSwitch from "@/creator/create/BondscapeSwitch";
 import CoverPicDropZone from "@/creator/create/CoverPicDropZone";
 import LocationInput from "@/creator/create/LocationInput";
 import SmallTextInput from "@/creator/create/SmallTextInput";
@@ -131,6 +132,13 @@ const MainSection = ({
                 required={false}
                 onChange={(tags) => setFieldValue("tags", tags)}
               />
+              <BondscapeSwitch
+                title={"Private Event"}
+                value={values.isPrivate}
+                onChange={(newValue) => {
+                  setFieldValue("isPrivate", newValue);
+                }}
+              />
             </div>
           </div>
         </div>

app/creator/create/[[...id]]/useHooks.ts

@@ -23,6 +23,7 @@ const useHooks = (eventId?: string) => {
     placeId: undefined,
     location: undefined,
     ticketsCategories: [],
+    isPrivate: false,
   });
 
   // Memoized values
@@ -72,6 +73,7 @@ const useHooks = (eventId?: string) => {
         organizers: event.organizers,
         tags: event.tags,
         website: event.website,
+        isPrivate: event.isPrivate,
         ticketsCategories: event.ticketsCategories.map((ticketCategory) => {
           return {
             id: ticketCategory.id,

app/creator/events/[id]/page.tsx

@@ -167,9 +167,18 @@ export default function EventDetails({ params }: { params: any }) {
               <Skeleton className="w-full h-full rounded-[12px]" />
             )}
           </div>
-          <div className="text-3xl font-semibold text-bondscape-text_neutral_900 mt-6 mb-4">
-            {selectedEvent?.name ?? <Skeleton width={500} />}
-          </div>
+          {selectedEvent ? (
+            <div className="flex flex-row gap-2 items-center justify-between">
+              <div className="text-3xl font-semibold text-bondscape-text_neutral_900 mt-6 mb-4">
+                {selectedEvent?.name}
+              </div>
+              <div className="text-sm font-semibold text-bondscape-text_neutral_900 mt-6 mb-4">
+                {selectedEvent?.isPrivate ? "Private Event" : "Public Event"}
+              </div>
+            </div>
+          ) : (
+            <Skeleton className="mt-8" width={500} />
+          )}
           {selectedEvent ? (
             <div className="flex flex-1 flex-row">
               <div className="flex justify-center items-center">
@@ -238,13 +247,15 @@ export default function EventDetails({ params }: { params: any }) {
                             ).time
                           }
                         </div>
-                        <div className="text-sm font-semibold text-bondscape-text_neutral_700">
-                          {serializeTimezoneOffset(
-                            extractTimezoneOffset(
-                              selectedEvent?.startDateLocalized,
-                            ),
-                          )}
-                        </div>
+                        {selectedEvent.startDateLocalized && (
+                          <div className="text-sm font-semibold text-bondscape-text_neutral_700">
+                            {serializeTimezoneOffset(
+                              extractTimezoneOffset(
+                                selectedEvent.startDateLocalized,
+                              ),
+                            )}
+                          </div>
+                        )}
                       </div>
                     ) : (
                       <Skeleton width={200} />

app/hooks/events/useCreateEvent.ts

@@ -147,6 +147,7 @@ export const useCreateEvent = () => {
         website: values.website,
         placeId: values.placeId,
         tags: values.tags,
+        isPrivate: values.isPrivate,
       };
 
       if (eventId) {

app/lib/DateUtils/index.ts

@@ -36,6 +36,9 @@ export const normalizeDateTime = (date: string): string => {
  * Utility function to extract the timezone offset from a RFC3339 encoded date time.
  */
 export const extractTimezoneOffset = (date: string): TimezoneOffset => {
+  if (!date) {
+    return { hours: 0, minutes: 0 };
+  }
   if (date.indexOf("Z") !== -1) {
     return { hours: 0, minutes: 0 };
   }

app/services/axios/requests/CreateEvent/index.ts

@@ -14,6 +14,7 @@ const CreateEvent = ({
   placeId,
   tags,
   website,
+  isPrivate,
 }: EventRequestParams): ResultAsync<any, Error> => {
   return ResultAsync.fromPromise(
     axiosInstance.post("/events", {
@@ -28,6 +29,7 @@ const CreateEvent = ({
       organizers_addresses: organizersAddresses,
       categories_ids: categoriesIds,
       tags: tags,
+      is_private: isPrivate,
     }),
     (e: any) => e ?? Error("Error creating event"),
   ).map((response) => {

app/services/axios/requests/EditEvent/index.ts

@@ -15,6 +15,7 @@ const EditEvent = ({
   placeId,
   tags,
   website,
+  isPrivate,
 }: EventRequestParams & {
   eventId: string;
 }): ResultAsync<
@@ -39,6 +40,7 @@ const EditEvent = ({
       organizers_addresses: organizersAddresses,
       categories_ids: categoriesIds,
       tags: tags,
+      is_private: isPrivate,
     }),
     (e: any) => e ?? Error("Error editing event"),
   ).map((response) => {

app/services/graphql/queries/bondscape/fragments/EventsFields.ts

@@ -41,6 +41,7 @@ const EventsFields = gql`
     detailsLink: details_link
     website
     tags
+    isPrivate: is_private
     ticketsCategories: tickets_categories {
       id
       name

app/types/event.ts

@@ -149,6 +149,7 @@ export interface Event {
    * Event tickets categories.
    */
   ticketsCategories: EventTicketCategory[];
+  isPrivate: boolean;
 }
 
 export interface TicketCategoryValues {
@@ -218,6 +219,7 @@ export interface CreateEventValues {
    * Event tickets categories.
    */
   ticketsCategories?: TicketCategoryValues[];
+  isPrivate?: boolean;
 }
 
 export interface GQLEventsResult {
@@ -255,6 +257,7 @@ export interface EventRequestParams {
   placeId?: string;
   organizersAddresses: string[];
   tags?: string[];
+  isPrivate?: boolean;
 }
 
 export interface TicketCategoryRequestParams {