Merge pull request Expensify#87543 from Expensify/tgolen-chronos-oooUI

[Payment due @dukenv0307] Add a UI to Chronos for creating OOO events

Author: AndrewGable

src/CONST/index.ts

@@ -290,6 +290,12 @@ const CONST = {
             START: 'start',
             STOP: 'stop',
         },
+        OOO_DURATION_UNITS: {
+            HOUR: 'hours',
+            DAY: 'days',
+            WEEK: 'weeks',
+            MONTH: 'months',
+        },
     },
 
     RECEIPT_CAMERA: {

src/ONYXKEYS.ts

@@ -890,6 +890,8 @@ const ONYXKEYS = {
         ONBOARDING_WORKSPACE_DETAILS_FORM_DRAFT: 'onboardingWorkspaceDetailsFormDraft',
         ROOM_NAME_FORM: 'roomNameForm',
         ROOM_NAME_FORM_DRAFT: 'roomNameFormDraft',
+        CHRONOS_SCHEDULE_OOO_FORM: 'chronosScheduleOOOForm',
+        CHRONOS_SCHEDULE_OOO_FORM_DRAFT: 'chronosScheduleOOOFormDraft',
         REPORT_DESCRIPTION_FORM: 'reportDescriptionForm',
         REPORT_DESCRIPTION_FORM_DRAFT: 'reportDescriptionFormDraft',
         LEGAL_NAME_FORM: 'legalNameForm',
@@ -1119,6 +1121,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.DISPLAY_NAME_FORM]: FormTypes.DisplayNameForm;
     [ONYXKEYS.FORMS.ONBOARDING_PERSONAL_DETAILS_FORM]: FormTypes.DisplayNameForm;
     [ONYXKEYS.FORMS.ROOM_NAME_FORM]: FormTypes.RoomNameForm;
+    [ONYXKEYS.FORMS.CHRONOS_SCHEDULE_OOO_FORM]: FormTypes.ChronosScheduleOOOForm;
     [ONYXKEYS.FORMS.REPORT_DESCRIPTION_FORM]: FormTypes.ReportDescriptionForm;
     [ONYXKEYS.FORMS.LEGAL_NAME_FORM]: FormTypes.LegalNameForm;
     [ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM]: FormTypes.WorkspaceInviteMessageForm;

src/ROUTES.ts

@@ -996,6 +996,10 @@ const ROUTES = {
         route: 'r/:reportID/settings/columns',
         getRoute: (reportID: string) => `r/${reportID}/settings/columns` as const,
     },
+    CHRONOS_SCHEDULE_OOO: {
+        route: 'r/:reportID/chronos/schedule-ooo',
+        getRoute: (reportID: string) => `r/${reportID}/chronos/schedule-ooo` as const,
+    },
     SPLIT_BILL_DETAILS: {
         route: 'r/:reportID/split/:reportActionID',
         getRoute: (reportID: string | undefined, reportActionID: string, backTo?: string) => {

src/SCREENS.ts

@@ -339,6 +339,7 @@ const SCREENS = {
         DOMAIN: 'Domain',
         EXPENSE_REPORT: 'ExpenseReport',
         MULTIFACTOR_AUTHENTICATION: 'MultifactorAuthentication',
+        CHRONOS_SCHEDULE_OOO: 'Chronos_Schedule_OOO',
     },
     REPORT_CARD_ACTIVATE: 'Report_Card_Activate_Root',
     SAML_SIGN_IN: 'SAMLSignIn',
@@ -924,6 +925,7 @@ const SCREENS = {
     AUTO_SUBMIT_ROOT: 'AutoSubmit_Modal_Root',
     CHANGE_POLICY_EDUCATIONAL_ROOT: 'ChangePolicyEducational_Root',
     REPORT_DESCRIPTION_ROOT: 'Report_Description_Root',
+    CHRONOS_SCHEDULE_OOO_ROOT: 'Chronos_Schedule_OOO_Root',
     REPORT_PARTICIPANTS: {
         ROOT: 'ReportParticipants_Root',
         INVITE: 'ReportParticipants_Invite',

src/components/AmountForm.tsx

@@ -46,6 +46,15 @@ type AmountFormProps = {
     /** Whether to hide the currency symbol */
     hideCurrencySymbol?: boolean;
 
+    /** When true, shows the trailing dropdown (same as currency picker in IOU amount flows) */
+    shouldShowCurrencyButton?: boolean;
+
+    /** Text on the trailing dropdown button. Use with `shouldShowCurrencyButton` when the suffix is not a currency code (e.g. duration unit). */
+    currencyButtonLabel?: string;
+
+    /** Accessibility label for the trailing dropdown */
+    currencyButtonAccessibilityLabel?: string;
+
     /** Whether the input should be disabled */
     disabled?: boolean;
 
@@ -77,6 +86,9 @@ function AmountForm({
     label,
     decimals: decimalsProp,
     hideCurrencySymbol = false,
+    shouldShowCurrencyButton = false,
+    currencyButtonLabel,
+    currencyButtonAccessibilityLabel,
     disabled = false,
     autoFocus,
     autoGrowExtraSpace,
@@ -94,7 +106,7 @@ function AmountForm({
     return (
         <NumberWithSymbolForm
             label={label}
-            value={value}
+            value={value ?? ''}
             decimals={decimals}
             currency={currency}
             displayAsTextInput={displayAsTextInput}
@@ -113,6 +125,9 @@ function AmountForm({
             symbolPosition={CONST.TEXT_INPUT_SYMBOL_POSITION.PREFIX}
             isSymbolPressable={isCurrencyPressable}
             hideSymbol={hideCurrencySymbol}
+            shouldShowCurrencyButton={shouldShowCurrencyButton}
+            currencyButtonLabel={currencyButtonLabel}
+            currencyButtonAccessibilityLabel={currencyButtonAccessibilityLabel}
             maxLength={amountMaxLength}
             errorText={errorText}
             style={displayAsTextInput ? undefined : styles.iouAmountTextInput}

src/components/ChronosTimerHeaderButton.tsx

@@ -9,20 +9,25 @@ import useOnyx from '@hooks/useOnyx';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isChronosTimerRunningFromVisibleActions} from '@libs/ChronosUtils';
+import Navigation from '@libs/Navigation/Navigation';
 import {getSortedReportActionsForDisplay} from '@libs/ReportActionsUtils';
 import {canUserPerformWriteAction, canWriteInReport} from '@libs/ReportUtils';
 import {addComment} from '@userActions/Report';
 import {callFunctionIfActionIsAllowed} from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {ReportActions} from '@src/types/onyx/ReportAction';
-import Button from './Button';
+import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
+import type {DropdownOption} from './ButtonWithDropdownMenu/types';
 
 type ChronosTimerHeaderButtonProps = {
     report: OnyxTypes.Report;
 };
 
+type ChronosAction = 'timer' | 'scheduleOOO';
+
 function ChronosTimerHeaderButton({report}: ChronosTimerHeaderButtonProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
@@ -59,16 +64,31 @@ function ChronosTimerHeaderButton({report}: ChronosTimerHeaderButtonProps) {
         });
     }
 
+    const options: Array<DropdownOption<ChronosAction>> = [
+        {
+            value: 'timer' as const,
+            text: translate(isTimerRunning ? 'chronos.stopTimer' : 'chronos.startTimer'),
+        },
+        {
+            value: 'scheduleOOO' as const,
+            text: translate('chronos.scheduleOOO'),
+            onSelected: () => Navigation.navigate(ROUTES.CHRONOS_SCHEDULE_OOO.getRoute(report.reportID)),
+            shouldUpdateSelectedIndex: false,
+        },
+    ];
+
     if (!canWriteInReport(report)) {
         return null;
     }
 
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
-            <Button
+            <ButtonWithDropdownMenu<ChronosAction>
                 success={!isTimerRunning}
-                text={translate(isTimerRunning ? 'chronos.stopTimer' : 'chronos.startTimer')}
-                onPress={callFunctionIfActionIsAllowed(sendCommentToChronos)}
+                onPress={() => {
+                    callFunctionIfActionIsAllowed(sendCommentToChronos)();
+                }}
+                options={options}
                 style={styles.flex1}
                 sentryLabel={CONST.SENTRY_LABEL.HEADER_VIEW.CHRONOS_TIMER_BUTTON}
             />

src/components/DatePicker/index.tsx

@@ -39,8 +39,7 @@ function DatePicker({
     const {translate} = useLocalize();
 
     const [isModalVisible, setIsModalVisible] = useState(false);
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined);
+    const [selectedDate, setSelectedDate] = useState(() => value ?? defaultValue ?? '');
     const [popoverPosition, setPopoverPosition] = useState({horizontal: 0, vertical: 0});
     const textInputRef = useRef<BaseTextInputRef>(null);
     const anchorRef = useRef<View>(null);
@@ -51,7 +50,10 @@ function DatePicker({
         if (shouldSaveDraft && formID) {
             setDraftValues(formID, {[inputID]: selectedDate});
         }
-        if (selectedDate === value || !value) {
+        if (selectedDate === value) {
+            return;
+        }
+        if (value === undefined) {
             return;
         }
 

src/components/NumberWithSymbolForm.tsx

@@ -106,6 +106,14 @@ type NumberWithSymbolFormProps = {
 
     /** Callback when currency button is pressed */
     onCurrencyButtonPress?: () => void;
+
+    /**
+     * Label on the trailing dropdown button (e.g. currency code). When set, used instead of `currency` so the same control can show a unit or other suffix.
+     */
+    currencyButtonLabel?: string;
+
+    /** Accessibility label for the trailing dropdown button (defaults to currency-based copy when unset) */
+    currencyButtonAccessibilityLabel?: string;
 } & Omit<TextInputWithSymbolProps, 'formattedAmount' | 'onAmountChange' | 'placeholder' | 'onSelectionChange' | 'onKeyPress' | 'onMouseDown' | 'onMouseUp'>;
 
 type NumberWithSymbolFormRef = {
@@ -173,6 +181,8 @@ function NumberWithSymbolForm({
     shouldShowFlipButton = false,
     shouldShowCurrencyButton = false,
     onCurrencyButtonPress,
+    currencyButtonLabel,
+    currencyButtonAccessibilityLabel,
     ...props
 }: NumberWithSymbolFormProps) {
     const icons = useMemoizedLazyExpensifyIcons(['DownArrow', 'PlusMinus']);
@@ -199,6 +209,9 @@ function NumberWithSymbolForm({
     // The ref is used to ignore any onSelectionChange event that happens while we are updating the selection manually in setNewNumber
     const willSelectionBeUpdatedManually = useRef(false);
 
+    const currencyOrUnitButtonText = currencyButtonLabel ?? currency;
+    const onTrailingDropdownPress = onCurrencyButtonPress ?? onSymbolButtonPress;
+
     const {setMouseDown, setMouseUp} = useMouseActions();
     const handleMouseDown = (e: React.MouseEvent<Element, MouseEvent>) => {
         e.stopPropagation();
@@ -430,21 +443,33 @@ function NumberWithSymbolForm({
                         isDisabled={disabled}
                     />
                 )}
-                {shouldShowCurrencyButton && !!currency && (
+                {shouldShowCurrencyButton && !!currencyOrUnitButtonText && (
                     <Button
                         shouldShowRightIcon
                         small
                         iconRight={icons.DownArrow}
-                        onPress={onCurrencyButtonPress}
+                        onPress={onTrailingDropdownPress}
                         isContentCentered
-                        text={currency}
-                        accessibilityLabel={`${translate('common.selectCurrency')}, ${currency}`}
+                        text={currencyOrUnitButtonText}
+                        accessibilityLabel={currencyButtonAccessibilityLabel ?? `${translate('common.selectCurrency')}, ${currencyOrUnitButtonText}`}
                         isDisabled={disabled}
                     />
                 )}
             </View>
         );
-    }, [shouldShowFlipButton, allowNegativeInput, disabled, shouldShowCurrencyButton, styles, icons, handleFlipPress, onCurrencyButtonPress, currency, translate]);
+    }, [
+        shouldShowFlipButton,
+        allowNegativeInput,
+        disabled,
+        shouldShowCurrencyButton,
+        styles,
+        icons,
+        handleFlipPress,
+        onTrailingDropdownPress,
+        currencyOrUnitButtonText,
+        currencyButtonAccessibilityLabel,
+        translate,
+    ]);
 
     if (displayAsTextInput) {
         return (
@@ -463,7 +488,7 @@ function NumberWithSymbolForm({
                     textInput.current = newRef;
                 }}
                 disabled={disabled}
-                prefixCharacter={symbol}
+                prefixCharacter={hideSymbol ? '' : symbol}
                 prefixStyle={styles.colorMuted}
                 keyboardType={props.keyboardType ?? CONST.KEYBOARD_TYPE.DECIMAL_PAD}
                 // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag.

src/components/PercentageForm.tsx

@@ -1,6 +1,7 @@
 import type {ForwardedRef} from 'react';
 import React, {useCallback, useMemo, useRef} from 'react';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {addLeadingZero, replaceAllDigits, replaceCommasWithPeriod, stripSpacesFromAmount, validatePercentage} from '@libs/MoneyRequestUtils';
 import CONST from '@src/CONST';
 import TextInput from './TextInput';
@@ -32,8 +33,20 @@ type PercentageFormProps = BaseTextInputProps & {
     ref?: ForwardedRef<BaseTextInputRef>;
 };
 
-function PercentageForm({value: amount, errorText, onInputChange, label, allowExceedingHundred = false, allowDecimal = false, allowNegative = false, ref, ...rest}: PercentageFormProps) {
+function PercentageForm({
+    value: amount,
+    errorText,
+    onInputChange,
+    label,
+    allowExceedingHundred = false,
+    allowDecimal = false,
+    allowNegative = false,
+    ref,
+    suffixStyle,
+    ...rest
+}: PercentageFormProps) {
     const {toLocaleDigit, numberFormat} = useLocalize();
+    const styles = useThemeStyles();
 
     const textInput = useRef<BaseTextInputRef | null>(null);
 
@@ -78,6 +91,7 @@ function PercentageForm({value: amount, errorText, onInputChange, label, allowEx
                 textInput.current = newRef;
             }}
             suffixCharacter="%"
+            suffixStyle={[styles.colorMuted, suffixStyle]}
             keyboardType={rest.keyboardType ?? CONST.KEYBOARD_TYPE.DECIMAL_PAD}
             // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag.
             // See https://github.com/Expensify/App/issues/51868 for more information

src/languages/de.ts

@@ -7906,6 +7906,21 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
         oooEventSummaryPartialDay: (summary: string, timePeriod: string, date: string) => `${summary} von ${timePeriod} am ${date}`,
         startTimer: 'Timer starten',
         stopTimer: 'Timer stoppen',
+        scheduleOOO: 'Abwesenheit planen',
+        scheduleOOOTitle: 'Abwesenheit planen',
+        date: 'Datum',
+        time: 'Zeit (24-Stunden-Format)',
+        durationAmount: 'Dauer',
+        durationUnit: 'Einheit',
+        reason: 'Grund',
+        workingPercentage: 'Arbeitsprozentsatz',
+        dateRequired: 'Datum ist erforderlich.',
+        invalidTimeFormat: 'Bitte geben Sie eine gültige Uhrzeit im 24‑Stunden-Format ein (z. B. 14:30).',
+        enterANumber: 'Bitte geben Sie eine Zahl ein.',
+        hour: 'Stunden',
+        day: 'Tage',
+        week: 'Wochen',
+        month: 'Monate',
     },
     footer: {
         features: 'Funktionen',