From f796d60038758bb41046450b27a9dcd4aa861ba0 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 6 Apr 2023 13:24:29 +0200
Subject: [PATCH 1/3] fix: constrain min and max age date for dob pickers

---
 src/CONST.js                                      | 1 +
 src/components/DatePicker/datepickerPropTypes.js  | 5 +++++
 src/components/DatePicker/index.android.js        | 7 +++++--
 src/components/DatePicker/index.ios.js            | 7 +++++--
 src/components/DatePicker/index.js                | 4 ++--
 src/pages/EnablePayments/AdditionalDetailsStep.js | 6 ++++++
 src/pages/ReimbursementAccount/IdentityForm.js    | 6 ++++++
 7 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 8fa2d86c0370..18219a67ffb4 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -63,6 +63,7 @@ const CONST = {
 
     DATE_BIRTH: {
         MIN_AGE: 5,
+        MIN_AGE_FOR_PAYMENT: 18,
         MAX_AGE: 150,
     },
 
diff --git a/src/components/DatePicker/datepickerPropTypes.js b/src/components/DatePicker/datepickerPropTypes.js
index 78db5e14d7c6..284fbc2f6996 100644
--- a/src/components/DatePicker/datepickerPropTypes.js
+++ b/src/components/DatePicker/datepickerPropTypes.js
@@ -18,11 +18,16 @@ const propTypes = {
      * `onInputChange` would always be called with a Date (or null)
      */
     defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+    minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
 };
 
 const defaultProps = {
     ...defaultFieldPropTypes,
     value: undefined,
+    minDate: undefined,
+    maxDate: undefined,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js
index 83c1ca5f09d4..2c6f1811e741 100644
--- a/src/components/DatePicker/index.android.js
+++ b/src/components/DatePicker/index.android.js
@@ -18,6 +18,9 @@ class DatePicker extends React.Component {
 
         this.showPicker = this.showPicker.bind(this);
         this.setDate = this.setDate.bind(this);
+
+        this.maxDate = this.props.maxDate || new Date(CONST.DATE.MAX_DATE);
+        this.minDate = this.props.minDate || new Date(CONST.DATE.MIN_DATE);
     }
 
     /**
@@ -74,8 +77,8 @@ class DatePicker extends React.Component {
                         value={this.props.value || this.props.defaultValue ? moment(this.props.value || this.props.defaultValue).toDate() : new Date()}
                         mode="date"
                         onChange={this.setDate}
-                        maximumDate={new Date(CONST.DATE.MAX_DATE)}
-                        minimumDate={new Date(CONST.DATE.MIN_DATE)}
+                        maximumDate={this.maxDate}
+                        minimumDate={this.minDate}
                     />
                 )}
             </>
diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
index 6e286e8447e2..c8a4e510131c 100644
--- a/src/components/DatePicker/index.ios.js
+++ b/src/components/DatePicker/index.ios.js
@@ -33,6 +33,9 @@ class DatePicker extends React.Component {
         this.reset = this.reset.bind(this);
         this.selectDate = this.selectDate.bind(this);
         this.updateLocalDate = this.updateLocalDate.bind(this);
+
+        this.maxDate = this.props.maxDate || new Date(CONST.DATE.MAX_DATE);
+        this.minDate = this.props.minDate || new Date(CONST.DATE.MIN_DATE);
     }
 
     showPicker() {
@@ -136,8 +139,8 @@ class DatePicker extends React.Component {
                         themeVariant="dark"
                         onChange={this.updateLocalDate}
                         locale={this.props.preferredLocale}
-                        maximumDate={new Date(CONST.DATE.MAX_DATE)}
-                        minimumDate={new Date(CONST.DATE.MIN_DATE)}
+                        maximumDate={this.maxDate}
+                        minimumDate={this.minDate}
                     />
                 </Popover>
             </>
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
index af53ebe3b501..e9ea8ead76a5 100644
--- a/src/components/DatePicker/index.js
+++ b/src/components/DatePicker/index.js
@@ -25,8 +25,8 @@ class DatePicker extends React.Component {
     componentDidMount() {
         // Adds nice native datepicker on web/desktop. Not possible to set this through props
         this.inputRef.setAttribute('type', 'date');
-        this.inputRef.setAttribute('max', CONST.DATE.MAX_DATE);
-        this.inputRef.setAttribute('min', CONST.DATE.MIN_DATE);
+        this.inputRef.setAttribute('max', this.props.maxDate ? moment(this.props.maxDate).format(CONST.DATE.MOMENT_FORMAT_STRING) : CONST.DATE.MAX_DATE);
+        this.inputRef.setAttribute('min', this.props.minDate ? moment(this.props.minDate).format(CONST.DATE.MOMENT_FORMAT_STRING) : CONST.DATE.MIN_DATE);
         this.inputRef.classList.add('expensify-datepicker');
     }
 
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index 80a781e6badd..ca1532ba66b6 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import {View} from 'react-native';
+import moment from 'moment/moment';
 import IdologyQuestions from './IdologyQuestions';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
@@ -108,6 +109,9 @@ class AdditionalDetailsStep extends React.Component {
             ssn: 'common.ssnLast4',
             ssnFull9: 'common.ssnFull9',
         };
+
+        this.minDate = moment().subtract(CONST.DATE_BIRTH.MAX_AGE, 'Y').toDate();
+        this.maxDate = moment().subtract(CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT, 'Y').toDate();
     }
 
     /**
@@ -262,6 +266,8 @@ class AdditionalDetailsStep extends React.Component {
                             containerStyles={[styles.mt4]}
                             label={this.props.translate(this.fieldNameTranslationKeys.dob)}
                             placeholder={this.props.translate('common.dob')}
+                            minDate={this.minDate}
+                            maxDate={this.maxDate}
                             shouldSaveDraft
                         />
                         <TextInput
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
index 149489d613b8..ab88d00bcda6 100644
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import moment from 'moment/moment';
 import _ from 'underscore';
 import TextInput from '../../components/TextInput';
 import styles from '../../styles/styles';
@@ -134,6 +135,9 @@ const IdentityForm = (props) => {
         || (props.errors.dobAge ? props.translate('bankAccount.error.age') : '');
     const identityFormInputKeys = ['firstName', 'lastName', 'dob', 'ssnLast4'];
 
+    const minDate = moment().subtract(CONST.DATE_BIRTH.MAX_AGE, 'Y').toDate();
+    const maxDate = moment().subtract(CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT, 'Y').toDate();
+
     return (
         <View style={props.style}>
             <View style={[styles.flexRow]}>
@@ -169,6 +173,8 @@ const IdentityForm = (props) => {
                 defaultValue={props.values.dob || props.defaultValues.dob}
                 onInputChange={value => props.onFieldChange({dob: value})}
                 errorText={dobErrorText}
+                minDate={minDate}
+                maxDate={maxDate}
             />
             <TextInput
                 inputID={props.inputKeys.ssnLast4}

From a7591bf04ce67a27b33beb0da9fdedfe17501a4a Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 6 Apr 2023 16:39:06 +0200
Subject: [PATCH 2/3] fix: apply requested changes

---
 src/components/DatePicker/datepickerPropTypes.js | 8 ++++++--
 src/components/DatePicker/index.android.js       | 7 ++-----
 src/components/DatePicker/index.ios.js           | 7 ++-----
 src/components/DatePicker/index.js               | 4 ++--
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/DatePicker/datepickerPropTypes.js b/src/components/DatePicker/datepickerPropTypes.js
index 284fbc2f6996..ffe22767db5b 100644
--- a/src/components/DatePicker/datepickerPropTypes.js
+++ b/src/components/DatePicker/datepickerPropTypes.js
@@ -3,6 +3,7 @@ import {
     propTypes as fieldPropTypes,
     defaultProps as defaultFieldPropTypes,
 } from '../TextInput/baseTextInputPropTypes';
+import CONST from '../../CONST';
 
 const propTypes = {
     ...fieldPropTypes,
@@ -19,15 +20,18 @@ const propTypes = {
      */
     defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
 
+    /** The earliest date allowed to select */
     minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+    /** The latest date allowed to select */
     maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
 };
 
 const defaultProps = {
     ...defaultFieldPropTypes,
     value: undefined,
-    minDate: undefined,
-    maxDate: undefined,
+    minDate: new Date(CONST.DATE.MIN_DATE),
+    maxDate: new Date(CONST.DATE.MAX_DATE),
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js
index 2c6f1811e741..01dd6eba6be5 100644
--- a/src/components/DatePicker/index.android.js
+++ b/src/components/DatePicker/index.android.js
@@ -18,9 +18,6 @@ class DatePicker extends React.Component {
 
         this.showPicker = this.showPicker.bind(this);
         this.setDate = this.setDate.bind(this);
-
-        this.maxDate = this.props.maxDate || new Date(CONST.DATE.MAX_DATE);
-        this.minDate = this.props.minDate || new Date(CONST.DATE.MIN_DATE);
     }
 
     /**
@@ -77,8 +74,8 @@ class DatePicker extends React.Component {
                         value={this.props.value || this.props.defaultValue ? moment(this.props.value || this.props.defaultValue).toDate() : new Date()}
                         mode="date"
                         onChange={this.setDate}
-                        maximumDate={this.maxDate}
-                        minimumDate={this.minDate}
+                        maximumDate={this.props.maxDate}
+                        minimumDate={this.props.minDate}
                     />
                 )}
             </>
diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
index c8a4e510131c..2b7d3ac3555b 100644
--- a/src/components/DatePicker/index.ios.js
+++ b/src/components/DatePicker/index.ios.js
@@ -33,9 +33,6 @@ class DatePicker extends React.Component {
         this.reset = this.reset.bind(this);
         this.selectDate = this.selectDate.bind(this);
         this.updateLocalDate = this.updateLocalDate.bind(this);
-
-        this.maxDate = this.props.maxDate || new Date(CONST.DATE.MAX_DATE);
-        this.minDate = this.props.minDate || new Date(CONST.DATE.MIN_DATE);
     }
 
     showPicker() {
@@ -139,8 +136,8 @@ class DatePicker extends React.Component {
                         themeVariant="dark"
                         onChange={this.updateLocalDate}
                         locale={this.props.preferredLocale}
-                        maximumDate={this.maxDate}
-                        minimumDate={this.minDate}
+                        maximumDate={this.props.maxDate}
+                        minimumDate={this.props.minDate}
                     />
                 </Popover>
             </>
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
index e9ea8ead76a5..8146c6b17765 100644
--- a/src/components/DatePicker/index.js
+++ b/src/components/DatePicker/index.js
@@ -25,8 +25,8 @@ class DatePicker extends React.Component {
     componentDidMount() {
         // Adds nice native datepicker on web/desktop. Not possible to set this through props
         this.inputRef.setAttribute('type', 'date');
-        this.inputRef.setAttribute('max', this.props.maxDate ? moment(this.props.maxDate).format(CONST.DATE.MOMENT_FORMAT_STRING) : CONST.DATE.MAX_DATE);
-        this.inputRef.setAttribute('min', this.props.minDate ? moment(this.props.minDate).format(CONST.DATE.MOMENT_FORMAT_STRING) : CONST.DATE.MIN_DATE);
+        this.inputRef.setAttribute('max', moment(this.props.maxDate).format(CONST.DATE.MOMENT_FORMAT_STRING));
+        this.inputRef.setAttribute('min', moment(this.props.minDate).format(CONST.DATE.MOMENT_FORMAT_STRING));
         this.inputRef.classList.add('expensify-datepicker');
     }
 

From 886dd09880e055b7476222478d90225e116fb78c Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 6 Apr 2023 17:40:11 +0200
Subject: [PATCH 3/3] fix: change min and max date propType

---
 src/components/DatePicker/datepickerPropTypes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DatePicker/datepickerPropTypes.js b/src/components/DatePicker/datepickerPropTypes.js
index ffe22767db5b..e7e377783945 100644
--- a/src/components/DatePicker/datepickerPropTypes.js
+++ b/src/components/DatePicker/datepickerPropTypes.js
@@ -21,10 +21,10 @@ const propTypes = {
     defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
 
     /** The earliest date allowed to select */
-    minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    minDate: PropTypes.instanceOf(Date),
 
     /** The latest date allowed to select */
-    maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    maxDate: PropTypes.instanceOf(Date),
 };
 
 const defaultProps = {
