New Meeting Sidebar (Continue) + Date/Time Picker Update

[tunile943]

Branches: organisms/NewMeeting-frontend + atoms/date-time-picker-fix

Task at Hand

organisms/NewMeeting-frontend (continue):

1. View the High Fidelity for the New Meeting Sidebar.

2. Place appropriate atoms in the layout per hi-fi design. You should include the following (others are being implemented):

• Meeting Title text field
• Date picker (updated)
• Time picker (updated)
• Location dropdown
• Meeting Type dropdown
• Zoom account dropdown
• Email text field
• Upload PandaDocs form
• Description

3. Confirm that your code and pull request follow the Pull Request Checklist.

   Acceptance Criteria

   • [ ] The sidebar layout have appropriate padding, margins, spacing per hi-fi.

atoms/date-time-picker-fix

1. Review the High Fidelity for the Num Date Input. Reference:

2. Add to date/time picker props the following:

   onChange: (value: string) => void;
   underlineOnFocus?: boolean;

So that means that your DatePickerProps should look like this:

interface DatePickerProps {
  label: string | JSX.Element;
  value?: string;
  onChange: (value: string) => void;
  underlineOnFocus?: boolean;
  error?: string;
  [key: string]: any;
}

similarly for TimePickerProps:

interface TimePickerProps {
  label: string | JSX.Element;
  value?: string;
  onChange: (value: string) => void;
  underlineOnFocus?: boolean;
  error?: string;
  disablePast?: boolean;
  [key: string]: any;
}

We want you to implement the following things in atoms/DatePicker and atoms/TimePicker:

• Make sure that whenever a user click on date/time picker, it will underline the input field.
• Reformat the date so that it will show appropriate string (so 05/18/2024 should be represented as May 18, 2024). Default value should be today.
• Make sure that when you click on date picker, a pop up will show up to user to input date.
• Reformat the time so that it will show appropriate string (14:30 should show up as 2:30pm). Default value should be now for start time and now + 1 hour for end time.
• When you update start time, end time should also update so that difference is remain the same (for example, if previously the field is 9:00am - 10:00am and you update your start time to 1:00pm, new end time should be 2:00pm).
• Make sure that the end time must be later than start time.

3. Confirm that your code and pull request follow the Pull Request Checklist.

   Acceptance Criteria

   • [ ] Confirm that underline and input format works per Design System (and as described above).

Notes

• No need to connect to backend yet, that will be for another ticket.