From 6570fdada4a63d225105ba9ff1a8119b34252195 Mon Sep 17 00:00:00 2001
From: Riccardo Montagnin <riccardo.montagnin@gmail.com>
Date: Tue, 7 Nov 2023 10:10:27 -0500
Subject: [PATCH] feat: improve event and ticket creation UI

---
 .../BondscapeDateTimePicker.tsx               | 13 +++++++++
 .../create/[[...id]]/CreateTicketCategory.tsx | 28 ++++++++++++-------
 app/creator/create/[[...id]]/MainSection.tsx  | 24 ++++++++--------
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/app/creator/create/BondscapeDateTimePicker/BondscapeDateTimePicker.tsx b/app/creator/create/BondscapeDateTimePicker/BondscapeDateTimePicker.tsx
index 26b860a..da619ee 100644
--- a/app/creator/create/BondscapeDateTimePicker/BondscapeDateTimePicker.tsx
+++ b/app/creator/create/BondscapeDateTimePicker/BondscapeDateTimePicker.tsx
@@ -6,6 +6,8 @@ import React, { useState } from "react";
 import "./style.css";
 
 interface Props {
+  readonly title?: string;
+  readonly description?: string;
   readonly startLabel?: string;
   readonly endLabel?: string;
   readonly initialStartValue?: string;
@@ -13,9 +15,12 @@ interface Props {
   readonly required: boolean;
   readonly onChangeStart: (value: string | undefined) => void;
   readonly onChangeEnd: (value: string | undefined) => void;
+  readonly footer?: React.ReactNode;
 }
 
 const BondscapeDateTimePicker = ({
+  title,
+  description,
   startLabel,
   endLabel,
   initialStartValue,
@@ -23,6 +28,7 @@ const BondscapeDateTimePicker = ({
   required,
   onChangeStart,
   onChangeEnd,
+  footer,
 }: Props) => {
   const [minDate, setMinDate] = useState<dayjs.Dayjs>();
   const [maxDate, setMaxDate] = useState<dayjs.Dayjs>();
@@ -57,6 +63,11 @@ const BondscapeDateTimePicker = ({
 
   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">
+        {title && <div className="font-bold">{title}</div>}
+        {description && <div className="text-sm">{description}</div>}
+      </div>
+
       <div className="flex flex-row items-center gap-2">
         <div className="flex gap-1 min-w-[130px]">
           <label className="text-[16px] text-bondscape-text_neutral_900 whitespace-nowrap">
@@ -117,6 +128,8 @@ const BondscapeDateTimePicker = ({
           />
         </div>
       </div>
+
+      {footer && <div className="text-bondscape-text_neutral_900 text-[12px] font-normal">{footer}</div>}
     </div>
   );
 };
diff --git a/app/creator/create/[[...id]]/CreateTicketCategory.tsx b/app/creator/create/[[...id]]/CreateTicketCategory.tsx
index e8d76ac..784c37c 100644
--- a/app/creator/create/[[...id]]/CreateTicketCategory.tsx
+++ b/app/creator/create/[[...id]]/CreateTicketCategory.tsx
@@ -130,9 +130,12 @@ const CreateTicketCategory = ({
                         )}
                       </ErrorMessage>
                       <div className="flex flex-col bg-bondscape-text_neutral_100 rounded-[16px] gap-[0.75rem] py-[16px]">
+                        <div className="text text-white text-left px-[1rem]">
+                          <div className="font-bold">Category info</div>
+                        </div>
                         <SmallTextInput
                           inputName={"category"}
-                          title={"Category"}
+                          title={"Name"}
                           placeholder={"Category name"}
                           required={true}
                           onChange={(text) => setFieldValue("category", text)}
@@ -153,10 +156,17 @@ const CreateTicketCategory = ({
                         )}
                       </ErrorMessage>
                       <div className="flex flex-col bg-bondscape-text_neutral_100 rounded-[16px] gap-[0.75rem] py-[16px]">
+                        <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.
+                          </div>
+                        </div>
                         <SmallTextInput
                           inputName={"maxQuantityPerPerson"}
                           title={"Per Person"}
-                          placeholder={"Max quantity per person"}
+                          placeholder={"Max amount of tickets a single user can get for this category"}
                           required={true}
                           onChange={(text) =>
                             setFieldValue(
@@ -169,8 +179,8 @@ const CreateTicketCategory = ({
                         />
                         <SmallTextInput
                           inputName={"maxQuantityPerCategory"}
-                          title={"Per Category"}
-                          placeholder={"Max quantity per category"}
+                          title={"Total"}
+                          placeholder={"Max amount of tickets available for this category"}
                           required={true}
                           onChange={(text) =>
                             setFieldValue(
@@ -183,6 +193,8 @@ const CreateTicketCategory = ({
                         />
                       </div>
                       <BondscapeDateTimePicker
+                        title="Availability"
+                        description="Here you can define when the tickets will be available for purchase."
                         startLabel={"Available From"}
                         endLabel={"Available Until"}
                         initialStartValue={values.availableFrom}
@@ -194,12 +206,8 @@ const CreateTicketCategory = ({
                         onChangeEnd={(value) =>
                           setFieldValue("availableUntil", value)
                         }
+                        footer="The availability time will be in the time zone based on where the event will be held."
                       />
-                      <div className="text-bondscape-text_neutral_900 text-[12px] font-normal">
-                        {
-                          "The availability time will be in the time zone based on where the event will be held."
-                        }
-                      </div>
                       <div className="flex flex-col bg-bondscape-text_neutral_100 rounded-[16px] gap-[0.75rem] py-[16px]">
                         <BondscapeSelectValidators
                           label={"Verifiers"}
@@ -219,7 +227,7 @@ const CreateTicketCategory = ({
                       </div>
                     </div>
                   </div>
-                  <div className="flex flex-1 justify-center gap-[40px] mt-20">
+                  <div className="flex flex-1 justify-center gap-[40px] mt-12">
                     <BondscapeButton
                       outlined
                       className="w-[256px] h-[44px] rounded-[8px] px-[24px] py-[12px]"
diff --git a/app/creator/create/[[...id]]/MainSection.tsx b/app/creator/create/[[...id]]/MainSection.tsx
index 2964d63..5bad559 100644
--- a/app/creator/create/[[...id]]/MainSection.tsx
+++ b/app/creator/create/[[...id]]/MainSection.tsx
@@ -76,25 +76,25 @@ const MainSection = ({
             />
           </div>
           <div className="flex flex-col w-[31.75rem] xl:w-[41.5rem] gap-[1rem]">
-            {(!values.startDate || !values.endDate) && (
-              <div className="text-feedback-warning text-[12px] font-normal">
-                {
-                  "The event can only be published if the dates are entered; otherwise, it can only be saved as a draft."
-                }
-              </div>
-            )}
             <BondscapeDateTimePicker
+              startLabel={"Start date"}
+              endLabel={"End date"}
               initialStartValue={values.startDate}
               initialEndValue={values.endDate}
               required={false}
               onChangeStart={(value) => setFieldValue("startDate", value)}
               onChangeEnd={(value) => setFieldValue("endDate", value)}
-            />
-            <div className="text-bondscape-text_neutral_900 text-[12px] font-normal">
-              {
-                "The start/end time of the event will be in the time zone based on where the event will be held."
+              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>
+              </div>
               }
-            </div>
+            />
             <BondscapeSelectCategory
               initialCategories={values.categories}
               required={false}