lint

src/CONST.ts

@@ -2609,8 +2609,8 @@ const CONST = {
         SBE: 'SbeDemoSetup',
     },
     BRICK_INDICATOR: {
-      ERROR: 'error'
-    }
+        ERROR: 'error',
+    },
 } as const;
 
 export default CONST;

src/components/AmountTextInput.js

@@ -27,9 +27,6 @@ const propTypes = {
     /** Function to call when selection in text input is changed */
     onSelectionChange: PropTypes.func,
 
-    /** Function to call when key is pressed in text input */
-    onKeyPress: PropTypes.func,
-
     /** Style for the input */
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 

src/components/Button/index.js

@@ -117,10 +117,6 @@ const propTypes = {
 
     /** Accessibility label for the component */
     accessibilityLabel: PropTypes.string,
-
-    // eslint-disable-next-line react/forbid-prop-types
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.object})]),
-
     /** Whether the long press is disabled */
     isDisabledLongPress: PropTypes.bool,
 

src/components/Form.js

@@ -85,6 +85,8 @@ const propTypes = {
     /** Style for the button */
     submitButtonStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
+    submitButtonContainerStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+
     ...withLocalizePropTypes,
 };
 
@@ -103,6 +105,7 @@ const defaultProps = {
     style: [],
     validate: () => ({}),
     submitButtonStyle: {},
+    submitButtonContainerStyles: [],
 };
 
 function Form(props) {
@@ -398,7 +401,7 @@ function Form(props) {
                                 focusInput.focus();
                             }
                         }}
-                        containerStyles={[styles.mh0, styles.mt5, styles.flex1, props.submitButtonContainerStyle]}
+                        containerStyles={[styles.mh0, styles.mt5, styles.flex1, ...props.submitButtonContainerStyles]}
                         enabledWhenOffline={props.enabledWhenOffline}
                         isSubmitActionDangerous={props.isSubmitActionDangerous}
                         buttonStyle={props.submitButtonStyle}
@@ -417,6 +420,7 @@ function Form(props) {
             inputValues,
             submit,
             props.style,
+            props.submitButtonContainerStyles,
             children,
             props.formState,
             props.footerContent,

src/components/FormHelpMessage.js

@@ -24,15 +24,15 @@ const propTypes = {
     style: stylePropTypes,
 
     /** Container text style props */
-    containerMessageStyle: stylePropTypes
+    containerMessageStyle: stylePropTypes,
 };
 
 const defaultProps = {
     message: '',
     children: null,
     isError: true,
     style: [],
-    containerMessageStyle: {}
+    containerMessageStyle: {},
 };
 
 function FormHelpMessage(props) {
@@ -42,7 +42,7 @@ function FormHelpMessage(props) {
 
     const translatedMessage = Localize.translateIfPhraseKey(props.message);
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.mb1, ...props.style,  styles.justifyContentCenter]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.mb1, ...props.style, styles.justifyContentCenter]}>
             {props.isError && (
                 <Icon
                     src={Expensicons.DotIndicator}

src/components/MenuItem.js

@@ -316,7 +316,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                             </View>
                             {Boolean(props.errorText) && (
                                 <FormHelpMessage
-                                    isError={true}
+                                    isError
                                     message={props.errorText}
                                     style={[styles.menuItemError]}
                                 />

src/components/TimePicker.js

@@ -14,21 +14,25 @@ import DateUtils from '../libs/DateUtils';
 import Text from './Text';
 import useKeyboardShortcut from '../hooks/useKeyboardShortcut';
 import FormHelpMessage from './FormHelpMessage';
+import refPropTypes from './refPropTypes';
 
 const propTypes = {
     /** Refs forwarded to the TextInputWithCurrencySymbol */
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
-
-    /** Fired when submit button pressed, saves the given amount and navigates to the next page */
-    onSubmitButtonPress: PropTypes.func,
+    forwardedRef: refPropTypes,
 
     /** Default value for the inputs */
     value: PropTypes.string,
+
+    /** Form Error description */
+    errorText: PropTypes.string,
+
+    /** Callback to call when the input changes */
+    onInputChange: PropTypes.func,
 };
 
 const defaultProps = {
     forwardedRef: null,
-    onSubmitButtonPress: () => {},
+    errorText: '',
     onInputChange: () => {},
     value: '',
 };
@@ -83,8 +87,8 @@ function replaceWithZeroAtPosition(originalString, position) {
     return `${originalString.slice(0, position - 1)}0${originalString.slice(position)}`;
 }
 
-function TimePicker({forwardedRef, onSubmitButtonPress, value, errorText, onInputChange}) {
-    const {translate, numberFormat} = useLocalize();
+function TimePicker({forwardedRef, value, errorText, onInputChange}) {
+    const {numberFormat} = useLocalize();
     const [hours, setHours] = useState(DateUtils.parseTimeTo12HourFormat(value).hour);
     const [minute, setMinute] = useState(DateUtils.parseTimeTo12HourFormat(value).minute);
     const [selectionHour, setSelectionHour] = useState({start: 0, end: 0});
@@ -96,14 +100,6 @@ function TimePicker({forwardedRef, onSubmitButtonPress, value, errorText, onInpu
     const minuteInputRef = useRef(null);
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 
-    /**
-     * Submit amount and navigate to a proper page
-     *
-     */
-    const submitAndNavigateToNextPage = useCallback(() => {
-        onSubmitButtonPress(`${hours}:${minute}`, amPmValue);
-    }, [hours, minute, onSubmitButtonPress, amPmValue]);
-
     const focusMinuteInputOnFirstCharacter = useCallback(() => {
         minuteInputRef.current.focus();
         setSelectionMinute({start: 0, end: 0});
@@ -310,8 +306,8 @@ function TimePicker({forwardedRef, onSubmitButtonPress, value, errorText, onInpu
     }, [canUseTouchScreen, updateAmountNumberPad]);
 
     useEffect(() => {
-        if (!_.isFunction(onInputChange)) return;
         onInputChange(`${hours}:${minute} ${amPmValue}`);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hours, minute, amPmValue]);
 
     return (
@@ -367,7 +363,7 @@ function TimePicker({forwardedRef, onSubmitButtonPress, value, errorText, onInpu
                         containerStyles={[styles.timePickerHeight100]}
                     />
                 </View>
-                {!!errorText ? (
+                {errorText ? (
                     <FormHelpMessage
                         isError={!!errorText}
                         message={errorText}

src/libs/DateUtils.js

@@ -425,9 +425,8 @@ function getStatusUntilDate(inputDate) {
 /**
  * Update the hour and minute of a date.
  *
- * @param {string} time - Time in "hh:mm A" format (like "10:55 AM").
- * @param {string} date - Date in "YYYY-MM-DD HH:mm:ss" format.
- *
+ * @param {string} inputTime - Time in "hh:mm A" format (like "10:55 AM").
+ * @param {string} inputDateTime - Date in "YYYY-MM-DD HH:mm:ss" format.
  * @returns {string} - Date with updated time in "YYYY-MM-DD HH:mm:ss" format.
  */
 const combineDateAndTime = (inputTime, inputDateTime) => {
@@ -446,15 +445,20 @@ const combineDateAndTime = (inputTime, inputDateTime) => {
     return parsedDateTime.format('YYYY-MM-DD HH:mm:ss');
 };
 
-function parseTimeTo12HourFormat(datetime) {
-    if (!datetime) {
+/**
+ * @param {String} time
+ * @returns {Object}
+ * @example parseTimeTo12HourFormat('2023-08-29 11:10:00') // {hour: '11', minute: '10', period: 'AM'}
+ */
+function parseTimeTo12HourFormat(time) {
+    if (!time) {
         return {
-            hour: '',
-            minute: '',
-            period: '',
+            hour: '00',
+            minute: '01',
+            period: 'AM',
         };
     }
-    const parsedTime = moment(datetime, 'YYYY-MM-DD HH:mm:ss');
+    const parsedTime = moment(time, 'h:mm A');
 
     return {
         hour: parsedTime.format('hh'), // Hour in 12-hour format
@@ -466,10 +470,11 @@ function parseTimeTo12HourFormat(datetime) {
 /**
  * @param {String} dateStr
  * @returns {String}
- * @example
+ * @example getTimePeriod('11:10 PM') // 'PM'
  */
 function getTimePeriod(dateStr) {
-    return moment(dateStr).format('A');
+    const formattedDateStr = `2023-08-29 ${dateStr}`; // Assuming a random date for formatting
+    return moment(formattedDateStr, 'YYYY-MM-DD h:mm A').format('A');
 }
 
 /**

src/libs/ValidationUtils.js

@@ -1,4 +1,4 @@
-import {subYears, addYears, addMinutes, startOfDay, endOfMonth, isAfter, isBefore, isValid, isWithinInterval, isSam, parse, set, format} from 'date-fns';
+import {subYears, addYears, addMinutes, startOfDay, endOfMonth, isAfter, isBefore, isValid, isWithinInterval, isSameDay, parse, set, format} from 'date-fns';
 import _ from 'underscore';
 import {URL_REGEX_WITH_REQUIRED_PROTOCOL} from 'expensify-common/lib/Url';
 import {parsePhoneNumber} from 'awesome-phonenumber';
@@ -256,7 +256,7 @@ function getAgeRequirementError(date, minimumAge, maximumAge) {
  */
 function isExpiredData(inputDate) {
     const currentDate = new Date();
-    const parsedDate = new Date(inputDate + 'T00:00:00'); // set time to 00:00:00 for accurate comparison
+    const parsedDate = new Date(`${inputDate}T00:00:00`); // set time to 00:00:00 for accurate comparison
 
     // If input date is not valid, return an error
     if (!isValid(parsedDate)) {
@@ -483,33 +483,33 @@ function isValidAccountRoute(accountID) {
 
 const isTimeAtLeastOneMinuteInFuture = (inputTime = '', inputDateTime = '') => {
     if (!inputTime) return false;
-      // Parse the hour and minute from the time input
-      const [hourStr, minuteStr, period] = inputTime.split(/[:\s]+/);
-      let hour = parseInt(hourStr, 10);
-  
-      // Convert 12-hour format to 24-hour format
-      if (period.toUpperCase() === "PM" && hour !== 12) {
-          hour += 12;
-      } else if (period.toUpperCase() === "AM" && hour === 12) {
-          hour = 0;
-      }
-  
-      const minute = parseInt(minuteStr, 10);
-  
-      // Check if the inputDateTime contains a time portion or is just a date
-      const dateTimeFormat = inputDateTime.includes(':') ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd';
-      
-      // Parse the input date and time (or just date) accordingly
-      const parsedInputDateTime = parse(inputDateTime, dateTimeFormat, new Date());
-  
-      // Set the hour and minute from the time input to the date from the date-time input
-      const combinedDate = set(parsedInputDateTime, { hours: hour, minutes: minute });
-  
-      // Get current date and time
-      const now = new Date();
-  
-      // Check if the combinedDate is at least one minute later than the current date and time
-      return isAfter(combinedDate, addMinutes(now, 1));
+    // Parse the hour and minute from the time input
+    const [hourStr, minuteStr, period] = inputTime.split(/[:\s]+/);
+    let hour = parseInt(hourStr, 10);
+
+    // Convert 12-hour format to 24-hour format
+    if (period.toUpperCase() === 'PM' && hour !== 12) {
+        hour += 12;
+    } else if (period.toUpperCase() === 'AM' && hour === 12) {
+        hour = 0;
+    }
+
+    const minute = parseInt(minuteStr, 10);
+
+    // Check if the inputDateTime contains a time portion or is just a date
+    const dateTimeFormat = inputDateTime.includes(':') ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd';
+
+    // Parse the input date and time (or just date) accordingly
+    const parsedInputDateTime = parse(inputDateTime, dateTimeFormat, new Date());
+
+    // Set the hour and minute from the time input to the date from the date-time input
+    const combinedDate = set(parsedInputDateTime, {hours: hour, minutes: minute});
+
+    // Get current date and time
+    const now = new Date();
+
+    // Check if the combinedDate is at least one minute later than the current date and time
+    return isAfter(combinedDate, addMinutes(now, 1));
 };
 
 export {

src/pages/settings/Profile/CustomStatus/CustomClearAfterPage.js

@@ -1,7 +1,6 @@
-import {useCallback} from 'react';
+import React, {useCallback} from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';

src/pages/settings/Profile/CustomStatus/SetTimePage.js

@@ -1,9 +1,8 @@
+import React from 'react';
 import PropTypes from 'prop-types';
-import React, {useCallback} from 'react';
-import {View } from 'react-native';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
-import withCurrentUserPersonalDetails from '../../../../components/withCurrentUserPersonalDetails';
 import FullscreenLoadingIndicator from '../../../../components/FullscreenLoadingIndicator';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
@@ -36,15 +35,13 @@ const defaultProps = {
     },
 };
 
-function SetTimePage({translate, privatePersonalDetails, customStatus, currentUserPersonalDetails}) {
+function SetTimePage({translate, privatePersonalDetails, customStatus}) {
     usePrivatePersonalDetails();
     const localize = useLocalize();
-    const clearAfter = lodashGet(currentUserPersonalDetails, 'status.clearAfter', '');
     const customDateTemporary = lodashGet(customStatus, 'customDateTemporary', '');
-    const draftClearAfter = lodashGet(customStatus, 'clearAfter', '');
 
-    const onSubmit = ({timePicker}, amPmValue) => {
-        const timeToUse = DateUtils.combineDateAndTime(`${timePicker} ${amPmValue}`, customDateTemporary);
+    const onSubmit = ({timePicker}) => {
+        const timeToUse = DateUtils.combineDateAndTime(timePicker, customDateTemporary);
 
         User.updateDraftCustomStatus({customDateTemporary: timeToUse});
         Navigation.goBack(ROUTES.SETTINGS_STATUS_CLEAR_AFTER);
@@ -73,17 +70,17 @@ function SetTimePage({translate, privatePersonalDetails, customStatus, currentUs
                 formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_TIME_FORM}
                 onSubmit={onSubmit}
                 submitButtonText={translate('common.save')}
-                submitButtonContainerStyle={[styles.mt0, styles.flex0, styles.mh4]}
+                submitButtonContainerStyles={[styles.mt0, styles.flex0, styles.mh4]}
                 validate={validate}
                 enabledWhenOffline
                 shouldUseDefaultValue
             >
-            <View style={styles.flex1}>
-                <TimePicker
-                    inputID="timePicker"
-                    defaultValue={customDateTemporary}
-                />
-            </View>
+                <View style={styles.flex1}>
+                    <TimePicker
+                        inputID="timePicker"
+                        defaultValue={DateUtils.extractTime12Hour(customDateTemporary)}
+                    />
+                </View>
             </Form>
         </ScreenWrapper>
     );
@@ -94,7 +91,6 @@ SetTimePage.defaultProps = defaultProps;
 SetTimePage.displayName = 'SetTimePage';
 
 export default compose(
-    withCurrentUserPersonalDetails,
     withLocalize,
     withOnyx({
         privatePersonalDetails: {

src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js

@@ -81,6 +81,7 @@ const useValidateCustomDate = (data) => {
 
     useEffect(() => {
         validate();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data]);
 
     const triggerValidation = () => {