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

@@ -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();

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>
   );
 };

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();

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(

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)}

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,