From c6246a291ab2a141518395760c0c79bd884d457f Mon Sep 17 00:00:00 2001
From: Alessandro Mazzon <alessandro@forbole.com>
Date: Fri, 10 Nov 2023 13:30:30 +0100
Subject: [PATCH] feat: dates localization (#23)

## Description

Now dates are localized using the same logic the mobile app is using
- Fixed some UI issues
- Removed the usage of `getDetails` from google maps

<!-- 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...

- [ ] 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/components/NavigationBar.tsx              |  21 ++--
 .../BondscapeDateTimePicker.tsx               |  40 +++++-
 app/creator/create/LocationInput.tsx          |  25 ++--
 .../create/[[...id]]/CreateTicketCategory.tsx |  30 ++++-
 app/creator/create/[[...id]]/MainSection.tsx  |  20 +--
 app/creator/create/[[...id]]/useHooks.ts      |   8 +-
 app/creator/events/[id]/page.tsx              | 105 ++++++++++------
 app/hooks/events/useGetGooglePlace.ts         |  65 ----------
 app/hooks/layout/useBreakpoints.ts            |   2 +-
 app/hooks/timeformat/useFormatDateToTZ.ts     | 108 ++++++++++------
 app/lib/DateUtils/index.ts                    | 119 ++++++++++++++++++
 .../bondscape/fragments/EventsFields.ts       |  10 ++
 app/types/event.ts                            |  33 +++++
 13 files changed, 400 insertions(+), 186 deletions(-)
 delete mode 100644 app/hooks/events/useGetGooglePlace.ts
 create mode 100644 app/lib/DateUtils/index.ts

diff --git a/app/components/NavigationBar.tsx b/app/components/NavigationBar.tsx
index 106799b..74f935a 100644
--- a/app/components/NavigationBar.tsx
+++ b/app/components/NavigationBar.tsx
@@ -1,16 +1,16 @@
 "use client";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import Link from "next/link";
-import BondscapeLogo from "./BondscapeLogo";
-import useBreakpoints from "../hooks/layout/useBreakpoints";
-import { usePathname } from "next/navigation";
-import useUser from "@/hooks/user/useUser";
-import SelectComponent from "@/components/SelectComponent";
-import { AnimatePresence, motion } from "framer-motion";
+import CreateEventHeader from "@/components/CreateEventHeader";
 import EventsHeader from "@/components/EventsHeader";
+import SelectComponent from "@/components/SelectComponent";
 import Tabs from "@/components/Tabs";
+import useUser from "@/hooks/user/useUser";
 import { useActiveTab, useSetActiveTab } from "@/jotai/activeTab";
-import CreateEventHeader from "@/components/CreateEventHeader";
+import { AnimatePresence, motion } from "framer-motion";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import useBreakpoints from "../hooks/layout/useBreakpoints";
+import BondscapeLogo from "./BondscapeLogo";
 
 interface Props {
   readonly disableNavbarBgInDesktop?: boolean;
@@ -33,7 +33,8 @@ const NavigationBar = ({
   const setActiveTab = useSetActiveTab();
   const [navbarBgVisible, setNavbarBgVisible] = useState(false);
   // Hooks
-  const [isMobile, isMd, isDesktop, isBreakpointReady] =
+  // Do not remove unused values
+  const [isMobile, isMd, isLg, isXl, isDesktop, isBreakpointReady] =
     useBreakpoints();
   const pathname = usePathname();
   const { user } = useUser();
diff --git a/app/creator/create/BondscapeDateTimePicker/BondscapeDateTimePicker.tsx b/app/creator/create/BondscapeDateTimePicker/BondscapeDateTimePicker.tsx
index da619ee..129791b 100644
--- a/app/creator/create/BondscapeDateTimePicker/BondscapeDateTimePicker.tsx
+++ b/app/creator/create/BondscapeDateTimePicker/BondscapeDateTimePicker.tsx
@@ -1,8 +1,9 @@
+import { getDatePickerParsedDate, normalizeDateTime } from "@/lib/DateUtils";
 import { DatePicker } from "antd";
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./style.css";
 
 interface Props {
@@ -30,6 +31,8 @@ const BondscapeDateTimePicker = ({
   onChangeEnd,
   footer,
 }: Props) => {
+  const [startValue, setStartValue] = useState<dayjs.Dayjs | undefined>();
+  const [endValue, setEndValue] = useState<dayjs.Dayjs | undefined>();
   const [minDate, setMinDate] = useState<dayjs.Dayjs>();
   const [maxDate, setMaxDate] = useState<dayjs.Dayjs>();
 
@@ -61,6 +64,25 @@ const BondscapeDateTimePicker = ({
     );
   };
 
+  useEffect(() => {
+    if (initialStartValue) {
+      const startValueWithoutTz = initialStartValue?.slice(0, -6);
+      setStartValue(dayjs(startValueWithoutTz));
+      onChangeStart(
+        normalizeDateTime(getDatePickerParsedDate(dayjs(startValueWithoutTz))),
+      );
+    }
+    if (initialEndValue) {
+      const endValueWithoutTz = initialEndValue?.slice(0, -6);
+      setEndValue(dayjs(endValueWithoutTz));
+      onChangeEnd(
+        normalizeDateTime(getDatePickerParsedDate(dayjs(endValueWithoutTz))),
+      );
+    }
+    // Adding those deps will cause an infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialEndValue, initialStartValue]);
+
   return (
     <div className="flex flex-col bg-bondscape-text_neutral_100 gap-[0.75rem] rounded-[16px]  p-[1rem]">
       <div className="text text-white text-left">
@@ -77,12 +99,13 @@ const BondscapeDateTimePicker = ({
         </div>
         <div className="flex flex-1">
           <DatePicker
-            value={initialStartValue ? dayjs(initialStartValue) : undefined}
+            value={startValue}
             disabledDate={maxDate ? (current) => current > maxDate : undefined}
             onChange={(date) => {
               setMinDate(date || undefined);
               if (date) {
-                onChangeStart(dayjs.utc(date).tz().format());
+                setStartValue(dayjs(date));
+                onChangeStart(normalizeDateTime(getDatePickerParsedDate(date)));
               } else {
                 onChangeStart(undefined);
               }
@@ -107,12 +130,13 @@ const BondscapeDateTimePicker = ({
         </div>
         <div className="flex flex-1">
           <DatePicker
-            value={initialEndValue ? dayjs(initialEndValue) : undefined}
+            value={endValue}
             disabledDate={minDate ? (current) => current < minDate : undefined}
             onChange={(date) => {
               setMaxDate(date || undefined);
               if (date) {
-                onChangeEnd(dayjs.utc(date).tz().format());
+                setEndValue(dayjs(date));
+                onChangeEnd(normalizeDateTime(getDatePickerParsedDate(date)));
               } else {
                 onChangeEnd(undefined);
               }
@@ -129,7 +153,11 @@ const BondscapeDateTimePicker = ({
         </div>
       </div>
 
-      {footer && <div className="text-bondscape-text_neutral_900 text-[12px] font-normal">{footer}</div>}
+      {footer && (
+        <div className="text-bondscape-text_neutral_900 text-[12px] font-normal">
+          {footer}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/app/creator/create/LocationInput.tsx b/app/creator/create/LocationInput.tsx
index 8b116e8..dee98ca 100644
--- a/app/creator/create/LocationInput.tsx
+++ b/app/creator/create/LocationInput.tsx
@@ -1,15 +1,22 @@
 import React, { useEffect } from "react";
-import usePlacesAutocomplete, { getDetails } from "use-places-autocomplete";
 import useOnclickOutside from "react-cool-onclickoutside";
+import usePlacesAutocomplete from "use-places-autocomplete";
 
 interface Props {
   readonly defaultValue?: string;
+  readonly formattedAddress?: string;
   readonly title: string;
   readonly required: boolean;
   readonly onChange: (placeId: string) => void;
 }
 
-const LocationInput = ({ defaultValue, title, required, onChange }: Props) => {
+const LocationInput = ({
+  defaultValue,
+  formattedAddress,
+  title,
+  required,
+  onChange,
+}: Props) => {
   const {
     ready,
     value,
@@ -22,18 +29,10 @@ const LocationInput = ({ defaultValue, title, required, onChange }: Props) => {
   });
 
   useEffect(() => {
-    if (defaultValue) {
-      getDetails({
-        placeId: defaultValue,
-      }).then((result) => {
-        if (typeof result !== "string") {
-          if (result?.formatted_address != null) {
-            setValue(result?.formatted_address, false);
-          }
-        }
-      });
+    if (formattedAddress) {
+      setValue(formattedAddress, false);
     }
-  }, [defaultValue, setValue]);
+  }, [formattedAddress, setValue]);
 
   const ref = useOnclickOutside(() => {
     clearSuggestions();
diff --git a/app/creator/create/[[...id]]/CreateTicketCategory.tsx b/app/creator/create/[[...id]]/CreateTicketCategory.tsx
index 76b2f7e..199c6f1 100644
--- a/app/creator/create/[[...id]]/CreateTicketCategory.tsx
+++ b/app/creator/create/[[...id]]/CreateTicketCategory.tsx
@@ -26,6 +26,7 @@ const CreateTicketCategory = ({
   onHide,
 }: CreateTicketCategoryProps) => {
   const { user } = useUser();
+  const [loading, setLoading] = useState(false);
   const [initialValues, setInitialValues] = useState<TicketCategoryValues>({
     description: "",
     category: "",
@@ -43,9 +44,11 @@ const CreateTicketCategory = ({
 
   useEffect(() => {
     if (selectedCategoryIndex !== undefined && globalValues.ticketsCategories) {
+      setLoading(true);
       setInitialValues({
         ...globalValues.ticketsCategories[selectedCategoryIndex],
       });
+      setLoading(false);
     }
   }, [globalValues.ticketsCategories, selectedCategoryIndex]);
 
@@ -80,6 +83,16 @@ const CreateTicketCategory = ({
     onHide();
   };
 
+  if (!initialValues) {
+    return (
+      <div className="max-w-[63.25rem]">
+        <div className="relative flex flex-col">
+          <div className="flex flex-1 flex-col bg-bondscape-surface rounded-[24px] p-x-6 p-y-10"></div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-[63.25rem]">
       <div className="relative flex flex-col">
@@ -107,7 +120,8 @@ const CreateTicketCategory = ({
                         text={"Upload an image"}
                         description={
                           <div className="text text-feedback-warning text-[12px]">
-                            This image will be the one used to create the NFTs of the tickets for this category.
+                            This image will be the one used to create the NFTs
+                            of the tickets for this category.
                           </div>
                         }
                         fileToUpload={values.coverPic}
@@ -165,14 +179,18 @@ const CreateTicketCategory = ({
                         <div className="text text-white text-left px-[1rem]">
                           <div className="font-bold">Tickets quantities</div>
                           <div className="text-sm">
-                            Here you can define the maximum amount of tickets that a single user can get for this
-                            category, as well as the maximum amount of tickets available for this category.
+                            Here you can define the maximum amount of tickets
+                            that a single user can get for this category, as
+                            well as the maximum amount of tickets available for
+                            this category.
                           </div>
                         </div>
                         <SmallTextInput
                           inputName={"maxQuantityPerPerson"}
                           title={"Per Person"}
-                          placeholder={"Max amount of tickets a single user can get for this category"}
+                          placeholder={
+                            "Max amount of tickets a single user can get for this category"
+                          }
                           required={true}
                           onChange={(text) =>
                             setFieldValue(
@@ -186,7 +204,9 @@ const CreateTicketCategory = ({
                         <SmallTextInput
                           inputName={"maxQuantityPerCategory"}
                           title={"Total"}
-                          placeholder={"Max amount of tickets available for this category"}
+                          placeholder={
+                            "Max amount of tickets available for this category"
+                          }
                           required={true}
                           onChange={(text) =>
                             setFieldValue(
diff --git a/app/creator/create/[[...id]]/MainSection.tsx b/app/creator/create/[[...id]]/MainSection.tsx
index 5bad559..621c396 100644
--- a/app/creator/create/[[...id]]/MainSection.tsx
+++ b/app/creator/create/[[...id]]/MainSection.tsx
@@ -79,20 +79,21 @@ const MainSection = ({
             <BondscapeDateTimePicker
               startLabel={"Start date"}
               endLabel={"End date"}
-              initialStartValue={values.startDate}
-              initialEndValue={values.endDate}
+              initialStartValue={values.startDateLocalized}
+              initialEndValue={values.endDateLocalized}
               required={false}
               onChangeStart={(value) => setFieldValue("startDate", value)}
               onChangeEnd={(value) => setFieldValue("endDate", value)}
               footer={
-              <div>
-                The start and end dates of the event will be in the time zone based on where the event will be held.
-                If no location is entered, the timezone will default to the UTC time zone.
-
-                <div className="text-feedback-warning mt-2">
-                  The event can only be published if the dates are entered; otherwise, it can only be saved as a draft.
+                <div>
+                  The start and end dates of the event will be in the time zone
+                  based on where the event will be held. If no location is
+                  entered, the timezone will default to the UTC time zone.
+                  <div className="text-feedback-warning mt-2">
+                    The event can only be published if the dates are entered;
+                    otherwise, it can only be saved as a draft.
+                  </div>
                 </div>
-              </div>
               }
             />
             <BondscapeSelectCategory
@@ -110,6 +111,7 @@ const MainSection = ({
               />
               <LocationInput
                 defaultValue={values.placeId}
+                formattedAddress={values.location?.formattedAddress}
                 title={"Location"}
                 required={false}
                 onChange={(placeId) => setFieldValue("placeId", placeId)}
diff --git a/app/creator/create/[[...id]]/useHooks.ts b/app/creator/create/[[...id]]/useHooks.ts
index ffad96e..7a2f231 100644
--- a/app/creator/create/[[...id]]/useHooks.ts
+++ b/app/creator/create/[[...id]]/useHooks.ts
@@ -21,6 +21,7 @@ const useHooks = (eventId?: string) => {
     startDate: undefined,
     endDate: undefined,
     placeId: undefined,
+    location: undefined,
     ticketsCategories: [],
   });
 
@@ -62,9 +63,12 @@ const useHooks = (eventId?: string) => {
         eventDetails: event.description,
         coverPicUrl: event.coverPic,
         startDate: event.startDate,
+        startDateLocalized: event.startDateLocalized,
         endDate: event.endDate,
+        endDateLocalized: event.endDateLocalized,
         categories: event.categories.map((category) => category.category),
         placeId: event.googlePlaceId,
+        location: event.location,
         organizers: event.organizers,
         tags: event.tags,
         website: event.website,
@@ -73,8 +77,8 @@ const useHooks = (eventId?: string) => {
             id: ticketCategory.id,
             category: ticketCategory.name,
             description: ticketCategory.description,
-            availableFrom: ticketCategory.startDate,
-            availableUntil: ticketCategory.endDate,
+            availableFrom: ticketCategory.startDateLocalized,
+            availableUntil: ticketCategory.endDateLocalized,
             ticketsSold: ticketCategory.ticketsSold?.aggregate.count || 0,
             maxQuantityPerPerson: ticketCategory.ticketsPerUser,
             maxQuantityPerCategory: ticketCategory.totalTicketsAvailable,
diff --git a/app/creator/events/[id]/page.tsx b/app/creator/events/[id]/page.tsx
index d8c247c..41575cd 100644
--- a/app/creator/events/[id]/page.tsx
+++ b/app/creator/events/[id]/page.tsx
@@ -1,10 +1,13 @@
 "use client";
 import BondscapeButton from "@/components/BondscapeButton";
-import useGetGooglePlace from "@/hooks/events/useGetGooglePlace";
 import useCustomLazyQuery from "@/hooks/graphql/useCustomLazyQuery";
 import useBreakpoints from "@/hooks/layout/useBreakpoints";
 import useFormatDateToTZ from "@/hooks/timeformat/useFormatDateToTZ";
 import MainLayout from "@/layouts/MainLayout";
+import {
+  extractTimezoneOffset,
+  serializeTimezoneOffset,
+} from "@/lib/DateUtils";
 import GetEventJoinLink from "@/services/axios/requests/GetEventJoinLink";
 import GetQrCode from "@/services/axios/requests/GetQrCode";
 import GetEventById from "@/services/graphql/queries/bondscape/GetEventById";
@@ -33,7 +36,6 @@ export default function EventDetails({ params }: { params: any }) {
   const router = useRouter();
   const [getEventById] = useCustomLazyQuery<GQLEventsResult>(GetEventById);
   const { getEventPeriodExtended } = useFormatDateToTZ();
-  const { googlePlace } = useGetGooglePlace(selectedEvent?.googlePlaceId);
 
   // Callbacks
 
@@ -218,19 +220,32 @@ export default function EventDetails({ params }: { params: any }) {
                   <div className="text-base font-semibold text-bondscape-text_neutral_900">
                     {selectedEvent ? (
                       getEventPeriodExtended(
-                        selectedEvent?.startDate,
-                        selectedEvent?.endDate,
+                        selectedEvent?.startDateLocalized,
+                        selectedEvent?.endDateLocalized,
                       ).date
                     ) : (
                       <Skeleton width={300} />
                     )}
                   </div>
-                  <div className="text-sm text-bondscape-text_neutral_700">
+                  <div>
                     {selectedEvent ? (
-                      getEventPeriodExtended(
-                        selectedEvent?.startDate,
-                        selectedEvent?.endDate,
-                      ).time
+                      <div className="flex flex-row gap-2">
+                        <div className="text-sm text-bondscape-text_neutral_700">
+                          {
+                            getEventPeriodExtended(
+                              selectedEvent?.startDateLocalized,
+                              selectedEvent?.endDateLocalized,
+                            ).time
+                          }
+                        </div>
+                        <div className="text-sm font-semibold text-bondscape-text_neutral_700">
+                          {serializeTimezoneOffset(
+                            extractTimezoneOffset(
+                              selectedEvent?.startDateLocalized,
+                            ),
+                          )}
+                        </div>
+                      </div>
                     ) : (
                       <Skeleton width={200} />
                     )}
@@ -240,8 +255,12 @@ export default function EventDetails({ params }: { params: any }) {
               <button
                 className="flex basis-1/2 flex-row gap-2 items-center"
                 onClick={() =>
-                  googlePlace?.url &&
-                  window.open(googlePlace.url, "_blank", "noreferrer")
+                  selectedEvent?.location?.url &&
+                  window.open(
+                    selectedEvent.location.url,
+                    "_blank",
+                    "noreferrer",
+                  )
                 }
               >
                 <div>
@@ -252,17 +271,17 @@ export default function EventDetails({ params }: { params: any }) {
                     src={"/eventDetailsLocationIcon.png"}
                   />
                 </div>
-                <div className="flex flex-col items-start">
+                <div className="w-[80%] text-start">
                   <div className="text-base font-semibold text-bondscape-text_neutral_900">
                     {selectedEvent ? (
-                      googlePlace?.name
+                      selectedEvent.location?.name
                     ) : (
                       <Skeleton width={300} />
                     )}
                   </div>
                   <div className="text-sm text-bondscape-text_neutral_700">
                     {selectedEvent ? (
-                      googlePlace?.formattedAddress
+                      selectedEvent?.location?.formattedAddress
                     ) : (
                       <Skeleton width={200} />
                     )}
@@ -364,31 +383,41 @@ export default function EventDetails({ params }: { params: any }) {
                       }}
                     />
                   </div>
-                  {ticketCategory.startDate && ticketCategory.endDate && (
-                    <div className="flex flex-row gap-2 items-center">
-                      <Image
-                        alt={"Tickets icon"}
-                        src={"/eventDetailsCalendarIcon.png"}
-                        width={20}
-                        height={20}
-                      />
-                      <div className="text-base font-normal leading-normal text-bondscape-text_neutral_700 mt-0.5">
-                        {
-                          getEventPeriodExtended(
-                            ticketCategory?.startDate,
-                            ticketCategory?.endDate,
-                          ).date
-                        }
-                        <span className="mr-2" />
-                        {
-                          getEventPeriodExtended(
-                            ticketCategory?.startDate,
-                            ticketCategory?.endDate,
-                          ).time
-                        }
+                  {ticketCategory.startDateLocalized &&
+                    ticketCategory.endDateLocalized && (
+                      <div className="flex flex-row gap-2 items-center">
+                        <Image
+                          alt={"Tickets icon"}
+                          src={"/eventDetailsCalendarIcon.png"}
+                          width={20}
+                          height={20}
+                        />
+                        <div className="flex flex-row gap-1 items-center">
+                          <div className="text-sm font-normal leading-normal text-bondscape-text_neutral_700 mt-0.5">
+                            {
+                              getEventPeriodExtended(
+                                ticketCategory?.startDateLocalized,
+                                ticketCategory?.endDateLocalized,
+                              ).date
+                            }
+                            <span className="mr-2" />
+                            {
+                              getEventPeriodExtended(
+                                ticketCategory?.startDateLocalized,
+                                ticketCategory?.endDateLocalized,
+                              ).time
+                            }
+                          </div>
+                          <div className="text-sm font-semibold text-bondscape-text_neutral_700">
+                            {serializeTimezoneOffset(
+                              extractTimezoneOffset(
+                                ticketCategory?.startDateLocalized,
+                              ),
+                            )}
+                          </div>
+                        </div>
                       </div>
-                    </div>
-                  )}
+                    )}
                 </div>
               );
             })}
diff --git a/app/hooks/events/useGetGooglePlace.ts b/app/hooks/events/useGetGooglePlace.ts
deleted file mode 100644
index 683e0e5..0000000
--- a/app/hooks/events/useGetGooglePlace.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useEffect, useState } from "react";
-import { Loader } from "@googlemaps/js-api-loader";
-
-export interface GooglePlace {
-  formattedAddress: string;
-  name?: string;
-  country?: string;
-  url: string | undefined;
-}
-
-const useGetGooglePlace = (placeId?: string) => {
-  const [googlePlace, setGooglePlace] = useState<GooglePlace | undefined>({
-    formattedAddress: "",
-    url: undefined,
-  });
-
-  /**
-   * Get the google place details by place id
-   */
-  useEffect(() => {
-    if (!placeId) {
-      setGooglePlace({
-        name: "Unavailable",
-        formattedAddress: "Unavailable",
-        url: undefined,
-      });
-      return;
-    }
-
-    const loader = new Loader({
-      apiKey: process.env.NEXT_PUBLIC_GOOGLE_PLACES_API_KEY,
-      version: "weekly",
-    });
-
-    loader.importLibrary("places").then(() => {
-      const service = new google.maps.places.PlacesService(
-        document.createElement("div"),
-      );
-      service.getDetails(
-        {
-          placeId: placeId,
-        },
-        (place, status) => {
-          if (status === google.maps.places.PlacesServiceStatus.OK) {
-            setGooglePlace({
-              formattedAddress: place?.formatted_address ?? "Unavailable",
-              url: place?.url ?? undefined,
-              name: place?.name ?? "Unavailable",
-              country:
-                place?.address_components?.find((component: any) =>
-                  component.types.includes("country"),
-                )?.long_name ?? "Unavailable",
-            });
-          }
-        },
-      );
-    });
-  }, [placeId]);
-
-  return {
-    googlePlace,
-  };
-};
-
-export default useGetGooglePlace;
diff --git a/app/hooks/layout/useBreakpoints.ts b/app/hooks/layout/useBreakpoints.ts
index eb39841..59cb1a7 100644
--- a/app/hooks/layout/useBreakpoints.ts
+++ b/app/hooks/layout/useBreakpoints.ts
@@ -1,6 +1,6 @@
+import { ContentWidth } from "@/utils/sizes";
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
-import { ContentWidth } from "@/utils/sizes";
 
 const useBreakpoints = () => {
   const [isBreakpointReady, setIsBreakpointReady] = useState(false);
diff --git a/app/hooks/timeformat/useFormatDateToTZ.ts b/app/hooks/timeformat/useFormatDateToTZ.ts
index b87e837..49ce19c 100644
--- a/app/hooks/timeformat/useFormatDateToTZ.ts
+++ b/app/hooks/timeformat/useFormatDateToTZ.ts
@@ -1,6 +1,11 @@
-import { useCallback } from "react";
+import {
+  addTimezoneOffsetToDate,
+  extractTimezoneOffset,
+  normalizeDateTime,
+} from "@/lib/DateUtils";
+import { differenceInHours, format, parseISO } from "date-fns";
 import { formatInTimeZone } from "date-fns-tz";
-import { differenceInHours, parseISO } from "date-fns";
+import { useCallback } from "react";
 
 /**
  * A hook that allows formatting a timestamp into a specified format.
@@ -8,17 +13,40 @@ import { differenceInHours, parseISO } from "date-fns";
 const useFormatDateToTZ = () => {
   const currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
+  /**
+   * Format a RFC3339 date respecting the timezone specified in the
+   * received date instead of converting it to the user's timezone.
+   */
+  const formatTimeRespectingTimezone = useCallback(
+    (timeToFormat: string, formatString: string) => {
+      if (!timeToFormat) {
+        return "T.B.D.";
+      }
+
+      // Extracts the timezone offset from the received date.
+      const timeZoneOffset = extractTimezoneOffset(timeToFormat);
+      // Parse the received date to a Date in the user's timezone.
+      const parsedTime = parseISO(normalizeDateTime(timeToFormat));
+      return format(
+        addTimezoneOffsetToDate(parsedTime, timeZoneOffset),
+        formatString,
+      );
+    },
+    [],
+  );
+
   /**
    * A function that formats a timestamp into a specified format.
    */
   const formatTime = useCallback(
-    (timeToFormat: string, formatString: string) => {
+    (timeToFormat: string | Date, formatString: string) => {
       if (!timeToFormat) return "T.B.D.";
       // append a zone designator to timestamp if it is not present
       // this is for formatting the time to different timezones
-      const parsedTime = parseISO(
-        !timeToFormat.includes("Z") ? `${timeToFormat}Z` : timeToFormat,
-      );
+      const parsedTime =
+        typeof timeToFormat === "string"
+          ? parseISO(normalizeDateTime(timeToFormat))
+          : timeToFormat;
       return formatInTimeZone(parsedTime, currentTimeZone, formatString);
     },
     [currentTimeZone],
@@ -33,26 +61,26 @@ const useFormatDateToTZ = () => {
   const getEventPeriod = useCallback(
     (start: string, end: string) => {
       if (!start || !end) return "T.B.D.";
-      const parsedStart = parseISO(!start.includes("Z") ? `${start}Z` : start);
-      const parsedEnd = parseISO(!end.includes("Z") ? `${end}Z` : end);
+      const parsedStart = parseISO(normalizeDateTime(start));
+      const parsedEnd = parseISO(normalizeDateTime(end));
 
       /**
        * If the difference between the start and end time is within 24 hours, only show the date
        * example: 02 Oct, 2021: 10:00 - 11:00
        */
       if (differenceInHours(parsedStart, parsedEnd) > -24) {
-        return `${formatTime(start, "EEE, MMM dd, yyyy")}`;
+        return `${formatTimeRespectingTimezone(start, "EEE, MMM dd, yyyy")}`;
       }
       /**
        * Otherwise show the date and time on both dates
        * example: 02 Oct, 2021: 10:00 - 03 Oct, 2021: 11:00
        */
-      return `${formatTime(start, "MMM dd")} - ${formatTime(
+      return `${formatTimeRespectingTimezone(start, "MMM dd")} - ${formatTime(
         end,
         "MMM dd, yyyy",
       )}`;
     },
-    [formatTime],
+    [formatTime, formatTimeRespectingTimezone],
   );
 
   /**
@@ -64,26 +92,26 @@ const useFormatDateToTZ = () => {
   const getPastEventPeriod = useCallback(
     (start: string, end: string) => {
       if (!start || !end) return "T.B.D.";
-      const parsedStart = parseISO(!start.includes("Z") ? `${start}Z` : start);
-      const parsedEnd = parseISO(!end.includes("Z") ? `${end}Z` : end);
+      const parsedStart = parseISO(normalizeDateTime(start));
+      const parsedEnd = parseISO(normalizeDateTime(end));
 
       /**
        * If the difference between the start and end time is within 24 hours, only show the date
        * example: 02 Oct, 2021: 10:00 - 11:00
        */
       if (differenceInHours(parsedStart, parsedEnd) > -24) {
-        return `${formatTime(start, "MMM dd, yyyy")}`;
+        return `${formatTimeRespectingTimezone(start, "MMM dd, yyyy")}`;
       }
       /**
        * Otherwise show the date and time on both dates
        * example: 02 Oct, 2021: 10:00 - 03 Oct, 2021: 11:00
        */
-      return `${formatTime(start, "MMM dd")} - ${formatTime(
-        end,
-        "MMM dd, yyyy",
-      )}`;
+      return `${formatTimeRespectingTimezone(
+        start,
+        "MMM dd",
+      )} - ${formatTimeRespectingTimezone(end, "MMM dd, yyyy")}`;
     },
-    [formatTime],
+    [formatTimeRespectingTimezone],
   );
 
   /**
@@ -99,25 +127,31 @@ const useFormatDateToTZ = () => {
           time: "",
         };
       }
-      const parsedStart = parseISO(!start.includes("Z") ? `${start}Z` : start);
-      const parsedEnd = parseISO(!end.includes("Z") ? `${end}Z` : end);
+      const parsedStart = parseISO(normalizeDateTime(start));
+      const parsedEnd = parseISO(normalizeDateTime(end));
 
       if (differenceInHours(parsedStart, parsedEnd) > -24) {
         return {
-          date: `${formatTime(start, "MMM dd, yyyy")}`,
-          time: `${formatTime(start, "HH:mm")} - ${formatTime(end, "HH:mm")}`,
+          date: `${formatTimeRespectingTimezone(start, "MMM dd, yyyy")}`,
+          time: `${formatTimeRespectingTimezone(
+            start,
+            "HH:mm",
+          )} - ${formatTimeRespectingTimezone(end, "HH:mm")}`,
         };
       }
 
       return {
-        date: `${formatTime(start, "MMM dd")} - ${formatTime(
-          end,
-          "MMM dd, yyyy",
-        )}`,
-        time: `${formatTime(start, "HH:mm")} - ${formatTime(end, "HH:mm")}`,
+        date: `${formatTimeRespectingTimezone(
+          start,
+          "MMM dd",
+        )} - ${formatTimeRespectingTimezone(end, "MMM dd, yyyy")}`,
+        time: `${formatTimeRespectingTimezone(
+          start,
+          "HH:mm",
+        )} - ${formatTimeRespectingTimezone(end, "HH:mm")}`,
       };
     },
-    [formatTime],
+    [formatTimeRespectingTimezone],
   );
 
   /**
@@ -127,23 +161,23 @@ const useFormatDateToTZ = () => {
    */
   const getEventPeriodCompressed = useCallback(
     (start: string, end: string) => {
-      const parsedStart = parseISO(!start.includes("Z") ? `${start}Z` : start);
-      const parsedEnd = parseISO(!end.includes("Z") ? `${end}Z` : end);
+      const parsedStart = parseISO(normalizeDateTime(start));
+      const parsedEnd = parseISO(normalizeDateTime(end));
 
       if (differenceInHours(parsedStart, parsedEnd) > -24) {
         return {
-          date: `${formatTime(start, "MMM dd, yyyy")}`,
+          date: `${formatTimeRespectingTimezone(start, "MMM dd, yyyy")}`,
         };
       }
 
       return {
-        date: `${formatTime(start, "MMM dd")} - ${formatTime(
-          end,
-          "MMM dd, yyyy",
-        )}`,
+        date: `${formatTimeRespectingTimezone(
+          start,
+          "MMM dd",
+        )} - ${formatTimeRespectingTimezone(end, "MMM dd, yyyy")}`,
       };
     },
-    [formatTime],
+    [formatTimeRespectingTimezone],
   );
 
   return {
diff --git a/app/lib/DateUtils/index.ts b/app/lib/DateUtils/index.ts
new file mode 100644
index 0000000..c27fe91
--- /dev/null
+++ b/app/lib/DateUtils/index.ts
@@ -0,0 +1,119 @@
+import dayjs, { Dayjs } from "dayjs";
+
+/**
+ * Interface that represents a timezone offset.
+ */
+export interface TimezoneOffset {
+  /**
+   * The hours offset.
+   * Can be positive for UTC + timezones or negative
+   * for UTC - timezones.
+   */
+  readonly hours: number;
+  /**
+   * The minutes offset.
+   * Can be positive for UTC + timezones or negative
+   * for UTC - timezones.
+   */
+  readonly minutes: number;
+}
+
+/**
+ * Utility function to normalize a RFC3339 date string
+ * by adding the Z character to the end of the string
+ * if don't contains the timezone offset or the Z character.
+ */
+export const normalizeDateTime = (date: string): string => {
+  const RFC3339Regex =
+    /^((?:(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2}(?:\.\d+)?))(Z|[+-]\d{2}:\d{2}))$/;
+  if (!RFC3339Regex.test(date)) {
+    return `${date}Z`;
+  }
+  return date;
+};
+
+/**
+ * Utility function to extract the timezone offset from a RFC3339 encoded date time.
+ */
+export const extractTimezoneOffset = (date: string): TimezoneOffset => {
+  if (date.indexOf("Z") !== -1) {
+    return { hours: 0, minutes: 0 };
+  }
+  const indexOfPlus = date.lastIndexOf("+");
+  const indexOfMinus = date.lastIndexOf("-");
+  // Return if there is no offset.
+  if (indexOfPlus === -1 && indexOfMinus === -1) {
+    return { hours: 0, minutes: 0 };
+  }
+  const offsetDividerIndex =
+    indexOfPlus !== -1 ? indexOfPlus + 1 : indexOfMinus + 1;
+  // Return an empty offset if the index is not at the end.
+  if (date.length - offsetDividerIndex < 2) {
+    return { hours: 0, minutes: 0 };
+  }
+  const offset = date.substring(offsetDividerIndex);
+  // Get an integer value that can be used later on to convert the parsed hours and
+  // minutes in +hours and +minutes if the UTC offset is + or
+  // -hours and -minutes if the UTC offset is -.
+  const offsetDirection = indexOfPlus !== -1 ? 1 : -1;
+
+  const [hours, minutes] = offset.split(":");
+  return {
+    hours:
+      hours && hours.length > 0 ? parseInt(hours, 10) * offsetDirection : 0,
+    minutes:
+      minutes && minutes.length > 0
+        ? parseInt(minutes, 10) * offsetDirection
+        : 0,
+  };
+};
+
+/**
+ * Utility function to serialize a {@link TimezoneOffset} to string.
+ */
+export const serializeTimezoneOffset = (offset: TimezoneOffset): string => {
+  if (offset.hours === 0 && offset.minutes === 0) {
+    return "UTC";
+  }
+  const sign = offset.hours < 0 ? "-" : "+";
+  const hours = Math.abs(offset.hours);
+  const minutes = Math.abs(offset.minutes);
+  if (minutes === 0) {
+    return `UTC ${sign}${hours}`;
+  }
+  return `UTC ${sign}${hours.toString().padStart(2, "0")}:${minutes
+    .toString()
+    .padStart(2, "0")}`;
+};
+
+/**
+ * Converts a provided date to a Date object with the provided {@link TimezoneOffset}.
+ */
+export const addTimezoneOffsetToDate = (
+  date: string | Date,
+  offset: TimezoneOffset,
+): Date => {
+  const parsedDate =
+    typeof date === "string" ? new Date(normalizeDateTime(date)) : date;
+  // Get the user's timezone offset in milliseconds.
+  // The timezone offset is - for +UTC timezones and + for -UTC timezones.
+  const userTimezoneOffset = parsedDate.getTimezoneOffset() * 60000;
+  // We sum the user's timezone offset so that
+  // when we create the date object will have the UTC time since
+  // the Date constructor will add back
+  // the user's timezone offset.
+  const utcTime = parsedDate.getTime() + userTimezoneOffset;
+  // Computes the timezone offset in milliseconds.
+  const timezoneOffset = offset.hours * 3600000 + offset.minutes * 60000;
+  return new Date(utcTime + timezoneOffset);
+};
+
+/**
+ * Converts a provided date to a Date in correct format to be sent to our APIs
+ * @param date string | Date - The date to convert.
+ */
+export const getDatePickerParsedDate = (date: Dayjs) => {
+  const offset = dayjs(date).utcOffset();
+  const dateWithOffset = dayjs(date).utcOffset(offset);
+  return dateWithOffset.format("YYYY-MM-DDTHH:mm:00");
+};
diff --git a/app/services/graphql/queries/bondscape/fragments/EventsFields.ts b/app/services/graphql/queries/bondscape/fragments/EventsFields.ts
index 20b0e81..98a9634 100644
--- a/app/services/graphql/queries/bondscape/fragments/EventsFields.ts
+++ b/app/services/graphql/queries/bondscape/fragments/EventsFields.ts
@@ -18,8 +18,16 @@ const EventsFields = gql`
       hash
     }
     startDate: start_date
+    startDateLocalized: start_date_localized
     endDate: end_date
+    endDateLocalized: end_date_localized
     googlePlaceId: google_place_id
+    location {
+      name
+      formattedAddress: formatted_address
+      country
+      url
+    }
     organizers {
       ...OrganizerFields
       organizerAddress: organizer_address
@@ -39,7 +47,9 @@ const EventsFields = gql`
       description
       coverPicUrl: tickets_image_url
       startDate: start_date
+      startDateLocalized: start_date_localized
       endDate: end_date
+      endDateLocalized: end_date_localized
       ticketsSold: tickets_aggregate {
         aggregate {
           count
diff --git a/app/types/event.ts b/app/types/event.ts
index a2848ae..1ddf268 100644
--- a/app/types/event.ts
+++ b/app/types/event.ts
@@ -1,6 +1,25 @@
 import { DesmosProfile } from "@/types/desmos";
 import { BondscapePreviewImage } from "@/types/image";
 
+export interface EventLocation {
+  /**
+   * Name of the location.
+   */
+  name: string;
+  /**
+   * Address of the location.
+   */
+  formattedAddress: string;
+  /**
+   * Country of the location.
+   */
+  country: string;
+  /**
+   * Link to the location on Google Maps.
+   */
+  url: string;
+}
+
 export interface Organizer {
   /**
    * Organizer Desmos profile.
@@ -35,7 +54,9 @@ export interface EventTicketCategory {
   description?: string;
   coverPicUrl?: string;
   startDate?: string;
+  startDateLocalized?: string;
   endDate?: string;
+  endDateLocalized?: string;
   ticketsSold?: {
     aggregate: {
       count: number;
@@ -73,14 +94,23 @@ export interface Event {
    * Event start date.
    */
   startDate: string;
+  /**
+   * Event start date localized.
+   */
+  startDateLocalized: string;
   /**
    * Event end date.
    */
   endDate: string;
+  /**
+   * Event end date localized.
+   */
+  endDateLocalized: string;
   /**
    * Event location.
    */
   googlePlaceId: string;
+  location: EventLocation;
   /**
    * Event organizers
    */
@@ -157,10 +187,12 @@ export interface CreateEventValues {
    * Event start date.
    */
   startDate?: string;
+  startDateLocalized?: string;
   /**
    * Event end date.
    */
   endDate?: string;
+  endDateLocalized?: string;
   /**
    * Event categories.
    */
@@ -173,6 +205,7 @@ export interface CreateEventValues {
    * Event place id (Google Maps).
    */
   placeId?: string;
+  location?: EventLocation;
   /**
    * Event organizers, creator + co-hosts.
    */