Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Create scheduling Select Date Time page #51

Merged
merged 22 commits into from
Dec 2, 2021
Merged

feat: Create scheduling Select Date Time page #51

merged 22 commits into from
Dec 2, 2021

Conversation

AmandaMisjuwar
Copy link
Contributor

@AmandaMisjuwar AmandaMisjuwar commented Nov 28, 2021 •
edited
Loading

Notion ticket link

Scheduling Flow - Select Date and Time

Implementation description

  • Add select date and time page that consists of the following components:
  1. Calendar to select a date
  2. Select daypart (Early morning, Morning, Afternoon, Evening, Night)
  3. Select drop-off time
  4. Select frequency
  5. Enter proposed end date (only render if this is NOT one time donation"

Steps to test

  1. Select a date in the datepicker. Only the dates for this week and next week can be selected. Everything else should be disabled.
  2. Select a time of day
  3. This should render the time slots. Each time slot should have icons representing number of ppl booked that slot.
  4. Select frequency
  5. Enter a proposed end date.
  6. Validations?
  7. Go to next page or go back and come back to this page. You should still see all the correct selected options.

Preferably, on the next page, do a console.log(formValues) and make sure all the formValues are correct.

Screen.Recording.2021-12-01.at.9.35.53.PM.mov

What should reviewers focus on?

Checklist

  • My PR name is descriptive and in imperative tense
  • My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
  • I have run the appropriate linter(s)
  • I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

@AmandaMisjuwar AmandaMisjuwar self-assigned this Nov 28, 2021
@github-actions
Copy link

github-actions bot commented Nov 28, 2021 •
edited
Loading

Visit the preview URL for this PR (updated for commit b4273b8):

https://community-fridge-kw--pr51-feat-select-date-tim-hv136pqn.web.app

(expires Thu, 09 Dec 2021 21:41:54 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

jossmurphy
jossmurphy reviewed Dec 2, 2021
View reviewed changes
frontend/src/components/common/RadioSelectGroup.tsx Outdated
<FormLabel>{label}</FormLabel>
{helperText && <FormHelperText mb="1em">{helperText}</FormHelperText>}
<FormLabel fontWeight="600">{label}</FormLabel>
<FormHelperText fontSize="16px" color="black" marginBottom="20px">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not that I think black is going to change that much but could use black.100 since the hex in the design system is actually #171717

frontend/src/components/common/WeeklyEventItemPopUp.tsx Outdated
</VStack>
<Spacer />
<Badge
color={`${(colorMap as any)[schedule!.frequency]}.100`}
backgroundColor={`${(colorMap as any)[schedule!.frequency]}.200`}
backgroundColor={`${
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just curious but what is colorMap as any doing?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually have no idea...I think this file change is in my PR bc yarn fix changed it but apparently it's this:
Screen Shot 2021-12-01 at 9 42 37 PM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's to map the frequency to the appropriate badge colour!

@AmandaMisjuwar AmandaMisjuwar marked this pull request as ready for review December 2, 2021 02:41
@annechung
Copy link
Contributor

annechung commented Dec 2, 2021 •
edited
Loading

looks good!! I think the reason the person icon isn't showing up in the deployed link is because assets can only be accessed in the public folder for a deployed app? (the pictures in the donation step don't show up either at the link) but that can be fixed in a separate item for all the assets
image

Shehryar21
Shehryar21 approved these changes Dec 2, 2021
View reviewed changes
frontend/src/components/common/WeeklyEventItemPopUp.tsx Outdated
Comment on lines 1 to 9
import { CalendarIcon, TimeIcon } from "@chakra-ui/icons";
import {
Badge,
Container,
Divider,
Flex,
Grid,
HStack,
Modal,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can u delete this file? It was moved inside Calender folder by Akshay in his pr.

@AmandaMisjuwar AmandaMisjuwar merged commit b777dfc into main Dec 2, 2021
@hanlinc27 hanlinc27 deleted the feat/select-date-time branch December 10, 2021 00:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@hanlinc27 hanlinc27 hanlinc27 left review comments

@jossmurphy jossmurphy jossmurphy left review comments

@Shehryar21 Shehryar21 Shehryar21 approved these changes

@annechung annechung annechung approved these changes

Assignees

@AmandaMisjuwar AmandaMisjuwar

Labels
frontend Frontend change ready for review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@AmandaMisjuwar @annechung @hanlinc27 @Shehryar21 @jossmurphy