Add second slider to AgeSlider component for choosing retirement month

src/components/age-slider.tsx

@@ -1,58 +1,112 @@
 import React from 'react'
 import Slider from 'rc-slider';
+import dayjs from "dayjs";
 import { colors } from '../constants'
 
 const defaultFRA = () => {
   console.warn("That is odd: You used default Full Retirement Age in slider");
   return 67;
 }
 
-const AgeSlider = ({age, handleChange, fullRetirementAge = defaultFRA()}) => {
+const AgeSlider = ({ fullRetirementDate, birthDate, preferPiaUserCalcValue, ageYearsOnly, ageMonthsOnly, handleChange, fullRetirementAgeYearsOnly, fullRetirementAgeMonthsOnly, fullRetirementAge = defaultFRA() }) => {
+
+  const fullRetirementMonthLabel = dayjs(fullRetirementDate).format('MMM');
+  const birthMonthLabel = dayjs(birthDate).format('MMM');
+  const eleventhMonthLabel = dayjs(birthDate).add(11, 'month').format('MMM');
+
   return (
-    <Slider
-      style = {{
-        marginTop: 60,
-        marginBottom: 60
-      }}
-      defaultValue = {age}
-      min={62} max={70}
-      marks=
-      {{
-        62:{
-          label: <strong style={{"fontSize": "18px"}}>62</strong>,
-          style: {
-            color: colors.black,
-          }
-        },
-        [fullRetirementAge]: {
-          label: <strong style={{"fontSize": "18px"}}>FRA: {fullRetirementAge.toFixed(2)}</strong>,
-          style: {
-            color: colors.black,
+    <React.Fragment>
+      <Slider
+        style={{
+          marginTop: 60,
+          marginBottom: 60
+        }}
+        defaultValue={ageYearsOnly}
+        min={62} max={70}
+        marks=
+        {{
+          62: {
+            label: <strong style={{ "fontSize": "18px" }}>62</strong>,
+            style: {
+              color: colors.black,
+            }
+          },
+          [fullRetirementAgeYearsOnly]: {
+            label: <strong style={{ "fontSize": "18px" }}>FRA: {fullRetirementAgeYearsOnly}</strong>,
+            style: {
+              color: colors.black,
+            }
+          },
+          70: {
+            label: <strong style={{ "fontSize": "18px" }}>70</strong>,
+            style: {
+              color: colors.black,
+            }
           }
-        },
-        70:{
-          label: <strong style={{"fontSize": "18px"}}>70</strong>,
-          style: {
-            color: colors.black,
+        }}
+        step={1}
+        trackStyle={{ backgroundColor: colors.gray }}
+        handleStyle={{
+          borderRadius: 0,
+          height: 24,
+          width: 15,
+          marginTop: -10,
+          backgroundColor: colors.purple,
+          boxShadow: '0 0 0 0',
+          borderColor: 'transparent'
+        }}
+        dotStyle={{ visibility: 'hidden' }}
+        activeDotStyle={{ visibility: 'hidden' }}
+        railStyle={{ backgroundColor: colors.gray }}
+        onAfterChange={(ageYearsOnly) => { handleChange(ageYearsOnly, ageMonthsOnly, preferPiaUserCalcValue) }}
+      />
+
+      <Slider
+        style={{
+          marginTop: 60,
+          marginBottom: 60
+        }}
+        defaultValue={ageMonthsOnly}
+        disabled={ ageYearsOnly === 70 ? true : false}
+        min={0} max={11}
+        marks=
+        {{
+          0: {
+          label: <strong style={{ "fontSize": "18px" }}>{birthMonthLabel}</strong>,
+            style: {
+              color: colors.black,
+            }
+          },
+          [fullRetirementAgeMonthsOnly]: {
+            label: <strong style={{ "fontSize": "18px" }}>FRA: {fullRetirementMonthLabel}</strong>,
+            style: {
+              color: colors.black,
+            }
+          },
+          11: {
+          label: <strong style={{ "fontSize": "18px" }}>{eleventhMonthLabel}</strong>,
+            style: {
+              color: colors.black,
+            }
           }
-        }
-      }}
-      step={1}
-      trackStyle={{ backgroundColor: colors.gray }}
-      handleStyle={{
-        borderRadius: 0,
-        height: 24,
-        width: 15,
-        marginTop: -10,
-        backgroundColor: colors.purple,
-        boxShadow: '0 0 0 0',
-        borderColor: 'transparent'
-      }}
-      dotStyle={{ visibility: 'hidden' }}
-      activeDotStyle={{ visibility: 'hidden' }}
-      railStyle={{ backgroundColor: colors.gray }}
-      onAfterChange={handleChange}
-    />
+        }}
+        step={1}
+        trackStyle={{ backgroundColor: colors.gray }}
+        handleStyle={{
+          borderRadius: 0,
+          height: 24,
+          width: 15,
+          marginTop: -10,
+          backgroundColor: colors.purple,
+          boxShadow: '0 0 0 0',
+          borderColor: 'transparent'
+        }}
+        dotStyle={{ visibility: 'hidden' }}
+        activeDotStyle={{ visibility: 'hidden' }}
+        railStyle={{ backgroundColor: colors.gray }}
+        onAfterChange={(ageMonthsOnly) => { handleChange(ageYearsOnly, ageMonthsOnly, preferPiaUserCalcValue) }}
+      />
+    </React.Fragment>
   )
 }
 

src/pages/screen-2.tsx

@@ -64,15 +64,20 @@ interface Screen2State {
   userWEP: boolean | null;
   error: string | null;
   testAge: number | null;
+  testAgeMonthsOnly: number | null;
+  testAgeYearsOnly: number | null;
   testProfile: UserProfile | null;
 }
 
 export class Screen2 extends React.Component<Screen2Props, Screen2State> {
+
   public state: Screen2State = {
     desiredRetireDate: this.props.userState.retireDate,
     userWEP: null,
     error: null,
     testAge: null,
+    testAgeMonthsOnly: this.props.userState.fullRetirementAgeMonthsOnly,
+    testAgeYearsOnly: this.props.userState.fullRetirementAgeYearsOnly,
     testProfile: null,
   };
 
@@ -172,18 +177,18 @@ export class Screen2 extends React.Component<Screen2Props, Screen2State> {
       retireDate,
       preferPiaUserCalcValue
     );
-    console.log("performCalc:",userCalc);
     setUserProfile(userCalc);
 
-    const yearsDiff = dayjs(desiredRetireDateValue).diff(dayjs(userDOB),'year', true);
-
+    const yearsDiff = dayjs(desiredRetireDateValue).diff(dayjs(userDOB),'year');
+    const monthsDiff = dayjs(desiredRetireDateValue).diff(dayjs(userDOB),'month') - (yearsDiff * 12);
     const clampedYearsDiff =
       yearsDiff < 62 ? 62 : yearsDiff > 70 ? 70 : yearsDiff;
-    this.handleRetireChange(clampedYearsDiff, preferPiaUserCalcValue);
+    this.handleRetireChange(clampedYearsDiff, monthsDiff, preferPiaUserCalcValue);
   };
 
   handleRetireChange = async (
-    age: number,
+    ageYearsOnly: number,
+    ageMonthsOnly: number,
     preferPiaUserCalcValue: boolean | null
   ) => {
     const {
@@ -194,34 +199,42 @@ export class Screen2 extends React.Component<Screen2Props, Screen2State> {
     // use the passed in value for fast updating, fall back to sessionStorage.
     const preferPiaUserCalcValueFastOrSlow =
       preferPiaUserCalcValue || preferPiaUserCalc;
-    //if 62 yo, add an extra month, as required by AnyPIA calculator.
-    const adjustMonthsFor62yo = age === 62 ? 1 : 0;
+
+    const is62ZeroMonths = (ageYearsOnly === 62) && (ageMonthsOnly === 0);
+
+    const is70Already = ageYearsOnly === 70;
+
+    //if 70 yo, set month of retirement to 0, as 70 yo is the maximum retirement age. If 62 yo, set minimum months to 1, as 62 and 1 month is the minimum retirement age.
+    const ageMonthsOnlyToUse = is70Already ? 0 : is62ZeroMonths ? 1 : ageMonthsOnly;
+
+    const retireAge = ageYearsOnly + (ageMonthsOnlyToUse / 12);
 
     const userDOB = birthDate.toLocaleDateString("en-US");
-    const retireMonth = age * 12;
+
     const userDOR = dayjs(userDOB)
-      .add(retireMonth, "month")
-      .add(adjustMonthsFor62yo, "month")
+      .add(ageYearsOnly, "year")
+      .add(ageMonthsOnlyToUse, "month")
       .toDate();
 
     const userCalc = await this.computeUserCalc(
       userDOR,
       preferPiaUserCalcValueFastOrSlow
     );
 
-    console.log("performCalc:", userCalc);
     if (userCalc)
       this.setState({
         desiredRetireDate: userDOR,
-        testAge: age,
+        testAge: retireAge,
+        testAgeYearsOnly: ageYearsOnly,
+        testAgeMonthsOnly: ageMonthsOnlyToUse,
         testProfile: userCalc,
       });
   };
 
   render() {
     const { userState, userStateActions } = this.props;
     const { setPreferPiaUserCalc } = userStateActions;
-    const { fullRetirementAge, userProfile, preferPiaUserCalc } = userState;
+    const { fullRetirementAge, fullRetirementAgeYearsOnly, fullRetirementAgeMonthsOnly, userProfile, preferPiaUserCalc, retireDate, birthDate } = userState;
 
     return (
       <React.Fragment>
@@ -329,13 +342,18 @@ export class Screen2 extends React.Component<Screen2Props, Screen2State> {
                     date of retirement will affect your monthly benefit amount.
                   </Text>
                   <AgeSlider
-                    age={this.state.testAge}
+                    ageMonthsOnly={this.state.testAgeMonthsOnly}
+                    ageYearsOnly={this.state.testAgeYearsOnly}
                     handleChange={this.handleRetireChange}
                     fullRetirementAge={fullRetirementAge ?? undefined}
+                    fullRetirementAgeYearsOnly={fullRetirementAgeYearsOnly ?? undefined}
+                    fullRetirementAgeMonthsOnly={fullRetirementAgeMonthsOnly ?? undefined}
+                    fullretirementDate={retireDate}
+                    birthDate={birthDate}
                     preferPiaUserCalcValue={preferPiaUserCalc}
                   />
                   <MonthlyBenefit
-                    text={`age ${this.state.testAge}`}
+                    text={`age ${this.state.testAgeYearsOnly} and ${this.state.testAgeMonthsOnly} months`}
                     number={
                       this.state.testProfile && this.state.testProfile["MPB"]
                     }