Content: Schedule Content Item Modal Revamp

[zcolah]

Problem

The current schedule content item modal has a few drawbacks:

1. Uses the old design system and hence is not consistent with the new visual language of our platform
2. Does not display the stored date time value with no mention that it is stored in UTC
3. Users find the date and time pickers frustrating to use. They want to type a date and time in.
4. All timezone regions are not listed.
5. The timezones do not show the time difference.

Solution

Key improvements include:

1. Adding a title to the modal
2. Adding the item version details
3. Adding more time zones along with a clear signifier that shows how many hours ahead or behind it is of GMT (e.g. GMT -7:00)
4. Adding the value the time is stored in the API along with a mention that that it is in UTC
5. Usage of new MUI design system dialog component
6. Usage of the new date and time field pickers

We have updated the unschedule modal as well

Developer Notes

1. When the schedule modal opens, it should open up on today’s date and time rounded to the next hour. For example,

• If the current date time is Jan 3, 2023, 6:21 pm, it should open up as Jan 3, 2023, 7:00 pm
• If the current date time is Jan 3, 2023, 11:21 pm, it should open up as Jan 4, 2023, 12:00 am
• Note: There will never be an empty state

2. Please use the date picker and time picker created for the date time field

3. Please disable the user from being able to select dates and times that have already have already passed. Notice how dates and times that cannot be selected have been greyed out.

4. Time Zone Field Notes:

• The timezone field should be an auto-complete field so that the user can easily search/filter for their time zone.
• The timezone should be automatically set to the users current time zone. If we cannot detect it, then default to Pacific Time as most users are in the United States. The second time zone will always be Coordinated Universal Time
• In the dropdown list, the first time zone will always be the time zone the user is in. We can detect this from their browser. If we cannot detect it, then default to Pacific Time as most users are in the United States. The second time zone will always be Coordinated Universal Time
• After that, please list all time zones available. This includes the time zones listed in the first section of the dropdown.
• If possible please list all the time zones shown in the Time Zone selection experience in Google Calendar. Happy to go over this on a call with you. Here is a link to a Google Doc in which I have listed all the time zones. Do note that this is in HTML https://docs.google.com/document/d/1TMWlGaGu9Jlae1qb5zk7-ZjKJYyqA3BNpyhWmxzhQqI/edit?usp=sharing
• If the user enters an invalid time, please put a red border and a tooltip saying Invalid Time Zone (see flow below). If the user does not correct the invalid timezone, and changes to another input, then please revert to the timezone saved before the user interacted with the timezone input.

Figma

https://www.figma.com/file/zOI7oSH3fG1XDmmPzsP6PX/Zesty-3.0-Revamp?type=design&node-id=3500%3A116010&mode=dev&t=fjNWcJ6E4yJNKr1e-1

[finnar-bin]

@zcolah should we prevent the users from typing the date and time and force them to use the datetime picker?

[zcolah]

Hey Nar Users will be able to type into each of these fields. We have provides rules for the same.

…

On Tue, Feb 20, 2024, 11:56 AM Nar Cuenca ***@***.***> wrote: @zcolah <https://github.com/zcolah> should we prevent the users from typing the date and time and force them to use the datetime picker? — Reply to this email directly, view it on GitHub <#2428 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFMT4747AV55CHNCGEZWBYDYUQ6Y3AVCNFSM6AAAAABBNIQ4QGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJTGU3DCOJZHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[finnar-bin]

As discussed, this will have to wait until #2417 is done