Update monthYearOnly to use last day of month (#2486)

## Summary:
BirthdayPicker currently use the first day of the month for the date if
`monthYearOnly` prop is set to `true`. But for most use-cases developers
want to use the last day of the month so that a user who is still 17,
for example, is not considered 18, if their birthday is anything after
the 1st of the month.

This update modifies the behavior of the component to pass the last day
of the month to `onChange` if `monthYearOnly` is set to `true`.

Issue: PG-5959

## Test plan:
- Modified unit tests to prove last day of month is returned when the
prop is set

Author: dmcalpin

.changeset/unlucky-cups-notice.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-birthday-picker": minor
+---
+
+Added useLastOfMonth to BirthdayPicker props

packages/wonder-blocks-birthday-picker/src/components/__tests__/birthday-picker.test.tsx

@@ -435,7 +435,7 @@ describe("BirthdayPicker", () => {
             expect(onChange).toHaveBeenCalledTimes(1);
         });
 
-        it("onChange triggers the first day of the month when monthYearOnly is set", async () => {
+        it("onChange triggers the last day of the month when monthYearOnly is set", async () => {
             // Arrange
             const onChange = jest.fn();
 
@@ -460,10 +460,10 @@ describe("BirthdayPicker", () => {
 
             // Assert
             // Verify that we passed the first day of the month
-            expect(onChange).toHaveBeenCalledWith("2018-08-01");
+            expect(onChange).toHaveBeenCalledWith("2018-08-31");
         });
 
-        it("onChange triggers the passed-in day intact when defaultValue and monthYearOnly are set", async () => {
+        it("onChange triggers uses last of month when defaultValue and monthYearOnly are set", async () => {
             // Arrange
             const onChange = jest.fn();
 
@@ -494,7 +494,7 @@ describe("BirthdayPicker", () => {
 
             // Assert
             // Verify that we passed the same day originally passed in.
-            expect(onChange).toHaveBeenCalledWith("2018-08-17");
+            expect(onChange).toHaveBeenCalledWith("2018-08-31");
         });
     });
 

packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx

@@ -46,9 +46,9 @@ type Props = {
     /**
      * Whether we want to hide the day field.
      *
-     * **NOTE:** We will set the day to the _first_ day of the _selected_ month
+     * **NOTE:** We will set the day to the _last_ day of the _selected_ month
      * if the day field is hidden. Please make sure to modify the passed date
-     * value to fit different needs (e.g. if you want to set the _first_ day of
+     * value to fit different needs (e.g. if you want to set the _last_ day of
      * the _following_ month instead).
      */
     monthYearOnly?: boolean;
@@ -178,7 +178,7 @@ export default class BirthdayPicker extends React.Component<Props, State> {
         const {defaultValue, monthYearOnly} = this.props;
         const initialState: State = {
             month: null,
-            day: monthYearOnly ? "1" : null,
+            day: null,
             year: null,
             error: null,
         };
@@ -189,9 +189,13 @@ export default class BirthdayPicker extends React.Component<Props, State> {
         // If a default value was provided then we use moment to convert it
         // into a date that we can use to populate the
         if (defaultValue) {
-            const date = moment(defaultValue);
+            let date = moment(defaultValue);
 
             if (date.isValid()) {
+                if (monthYearOnly) {
+                    date = date.endOf("month");
+                }
+
                 initialState.month = String(date.month());
                 initialState.day = String(date.date());
                 initialState.year = String(date.year());
@@ -230,17 +234,28 @@ export default class BirthdayPicker extends React.Component<Props, State> {
      */
     handleChange: () => void = (): void => {
         const {month, day, year} = this.state;
+        const {monthYearOnly} = this.props;
+
+        const dateFields = [year, month];
+        if (!monthYearOnly) {
+            dateFields.push(day);
+        }
 
         // If any of the values haven't been set then our overall value is
         // equal to null
-        if (month === null || day === null || year === null) {
+        if (dateFields.some((field) => field === null)) {
             this.reportChange(null);
             return;
         }
 
-        // This is a legal call to Moment, but our Moment types don't
-        // recognize it.
-        const date = moment([year, month, day]);
+        // If the month/year only mode is enabled, we set the day to the
+        // last day of the selected month.
+        // NOTE: at this point dateFields is guaranteed to have non-null values
+        // because of the .some() check above.
+        let date = moment(dateFields as Array<string>);
+        if (monthYearOnly) {
+            date = date.endOf("month");
+        }
 
         // If the date is in the future or is invalid then we want to show
         // an error to the user and return a null value.