Merge branch 'main' into jamesdeanexpensify-patch-2

src/components/AddPaymentCard/PaymentCardForm.tsx

@@ -137,6 +137,7 @@ function PaymentCardForm({
 
     const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
     const [currency, setCurrency] = useState<keyof typeof CONST.CURRENCY>(CONST.CURRENCY.USD);
+    const [cardNumber, setCardNumber] = useState('');
 
     const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM> => {
         const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS);
@@ -181,6 +182,23 @@ function PaymentCardForm({
         setIsCurrencyModalVisible(false);
     }, []);
 
+    const onChangeCardNumber = useCallback((newValue: string) => {
+        // replace all characters that are not spaces or digits
+        let validCardNumber = newValue.replace(/[^\d ]/g, '');
+
+        // gets only the first 16 digits if the inputted number have more digits than that
+        validCardNumber = validCardNumber.match(/(?:\d *){1,16}/)?.[0] ?? '';
+
+        // add the spacing between every 4 digits
+        validCardNumber =
+            validCardNumber
+                .replace(/ /g, '')
+                .match(/.{1,4}/g)
+                ?.join(' ') ?? '';
+
+        setCardNumber(validCardNumber);
+    }, []);
+
     if (!shouldShowPaymentCardForm) {
         return null;
     }
@@ -204,6 +222,8 @@ function PaymentCardForm({
                     role={CONST.ROLE.PRESENTATION}
                     ref={cardNumberRef}
                     inputMode={CONST.INPUT_MODE.NUMERIC}
+                    onChangeText={onChangeCardNumber}
+                    value={cardNumber}
                 />
                 <InputWrapper
                     InputComponent={TextInput}

src/components/AddPaymentMethodMenu.tsx

@@ -11,7 +11,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {AnchorPosition} from '@src/styles';
 import type {Report, Session} from '@src/types/onyx';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
-import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import * as Expensicons from './Icon/Expensicons';
 import type {PaymentMethod} from './KYCWall/types';
 import PopoverMenu from './PopoverMenu';
@@ -32,7 +31,7 @@ type AddPaymentMethodMenuProps = AddPaymentMethodMenuOnyxProps & {
     onItemSelected: (paymentMethod: PaymentMethod) => void;
 
     /** The IOU/Expense report we are paying */
-    iouReport?: OnyxEntry<Report> | EmptyObject;
+    iouReport?: OnyxEntry<Report>;
 
     /** Anchor position for the AddPaymentMenu. */
     anchorPosition: AnchorPosition;
@@ -65,9 +64,9 @@ function AddPaymentMethodMenu({
 
     // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report
     // which then starts a bottom up flow and creates a Collect workspace where the payer is an admin and payee is an employee.
-    const isIOUReport = ReportUtils.isIOUReport(iouReport ?? {});
+    const isIOUReport = ReportUtils.isIOUReport(iouReport);
     const canUseBusinessBankAccount =
-        ReportUtils.isExpenseReport(iouReport ?? {}) || (isIOUReport && !ReportActionsUtils.hasRequestFromCurrentAccount(iouReport?.reportID ?? '-1', session?.accountID ?? -1));
+        ReportUtils.isExpenseReport(iouReport) || (isIOUReport && !ReportActionsUtils.hasRequestFromCurrentAccount(iouReport?.reportID ?? '-1', session?.accountID ?? -1));
 
     const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || isIOUReport;
 

src/components/AttachmentModal.tsx

@@ -26,7 +26,6 @@ import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
-import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type ModalType from '@src/types/utils/ModalType';
 import AttachmentCarousel from './Attachments/AttachmentCarousel';
@@ -99,7 +98,7 @@ type AttachmentModalProps = AttachmentModalOnyxProps & {
     headerTitle?: string;
 
     /** The report that has this attachment */
-    report?: OnyxEntry<OnyxTypes.Report> | EmptyObject;
+    report?: OnyxEntry<OnyxTypes.Report>;
 
     /** The type of the attachment */
     type?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;

src/components/ConnectionLayout.tsx

@@ -94,8 +94,8 @@ function ConnectionLayout({
 }: ConnectionLayoutProps) {
     const {translate} = useLocalize();
 
-    const policy = PolicyUtils.getPolicy(policyID ?? '');
-    const isConnectionEmpty = isEmpty(policy.connections?.[connectionName]);
+    const policy = PolicyUtils.getPolicy(policyID);
+    const isConnectionEmpty = isEmpty(policy?.connections?.[connectionName]);
 
     const renderSelectionContent = useMemo(
         () => (

src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer.tsx

@@ -15,7 +15,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Report} from '@src/types/onyx';
-import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
 type MentionReportOnyxProps = {
@@ -27,7 +26,7 @@ type MentionReportRendererProps = MentionReportOnyxProps & CustomRendererProps<T
 
 const removeLeadingLTRAndHash = (value: string) => value.replace(CONST.UNICODE.LTR, '').replace('#', '');
 
-const getMentionDetails = (htmlAttributeReportID: string, currentReport: OnyxEntry<Report> | EmptyObject, reports: OnyxCollection<Report>, tnode: TText | TPhrasing) => {
+const getMentionDetails = (htmlAttributeReportID: string, currentReport: OnyxEntry<Report>, reports: OnyxCollection<Report>, tnode: TText | TPhrasing) => {
     let reportID: string | undefined;
     let mentionDisplayText: string;
 

src/components/KYCWall/types.ts

@@ -7,7 +7,6 @@ import type {Route} from '@src/ROUTES';
 import type {Report} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
-import type {EmptyObject} from '@src/types/utils/EmptyObject';
 
 type Source = ValueOf<typeof CONST.KYC_WALL_SOURCE>;
 
@@ -45,7 +44,7 @@ type KYCWallProps = {
     chatReportID?: string;
 
     /** The IOU/Expense report we are paying */
-    iouReport?: OnyxEntry<Report> | EmptyObject;
+    iouReport?: OnyxEntry<Report>;
 
     /** Where the popover should be positioned relative to the anchor points. */
     anchorAlignment?: AnchorAlignment;

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -133,7 +133,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
             if (ReportActionsUtils.isMoneyRequestAction(lastReportAction)) {
                 lastReportActionTransactionID = ReportActionsUtils.getOriginalMessage(lastReportAction)?.IOUTransactionID ?? '-1';
             }
-            const lastReportActionTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${lastReportActionTransactionID}`] ?? {};
+            const lastReportActionTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${lastReportActionTransactionID}`];
 
             return (
                 <OptionRowLHNData

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -24,7 +24,7 @@ function OptionRowLHNData({
     receiptTransactions,
     parentReportAction,
     transaction,
-    lastReportActionTransaction = {},
+    lastReportActionTransaction,
     transactionViolations,
     canUseViolations,
     ...propsToForward

src/components/LHNOptionsList/types.ts

@@ -6,7 +6,6 @@ import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 import type {OptionData} from '@src/libs/ReportUtils';
 import type {Locale, PersonalDetailsList, Policy, Report, ReportAction, ReportActions, Transaction, TransactionViolation} from '@src/types/onyx';
-import type {EmptyObject} from '@src/types/utils/EmptyObject';
 
 type OptionMode = ValueOf<typeof CONST.OPTION_MODE>;
 
@@ -58,7 +57,7 @@ type OptionRowLHNDataProps = {
     transaction: OnyxEntry<Transaction>;
 
     /** The transaction linked to the report's last action */
-    lastReportActionTransaction?: OnyxEntry<Transaction | EmptyObject>;
+    lastReportActionTransaction?: OnyxEntry<Transaction>;
 
     /** Whether a report contains a draft */
     hasDraftComment: boolean;

src/components/LocaleContextProvider.tsx

@@ -72,7 +72,7 @@ const LocaleContext = createContext<LocaleContextProps>({
     preferredLocale: CONST.LOCALES.DEFAULT,
 });
 
-function LocaleContextProvider({preferredLocale, currentUserPersonalDetails = {}, children}: LocaleContextProviderProps) {
+function LocaleContextProvider({preferredLocale, currentUserPersonalDetails, children}: LocaleContextProviderProps) {
     const locale = preferredLocale ?? CONST.LOCALES.DEFAULT;
 
     const selectedTimezone = useMemo(() => currentUserPersonalDetails?.timezone?.selected, [currentUserPersonalDetails]);

src/components/PopoverProvider/index.native.tsx

@@ -3,7 +3,7 @@ import type {PopoverContextProps, PopoverContextValue} from './types';
 
 const PopoverContext = React.createContext<PopoverContextValue>({
     onOpen: () => {},
-    popover: {},
+    popover: null,
     close: () => {},
     isOpen: false,
 });
@@ -13,7 +13,7 @@ function PopoverContextProvider(props: PopoverContextProps) {
         () => ({
             onOpen: () => {},
             close: () => {},
-            popover: {},
+            popover: null,
             isOpen: false,
         }),
         [],

src/components/PopoverProvider/index.tsx

@@ -6,7 +6,7 @@ import type {AnchorRef, PopoverContextProps, PopoverContextValue} from './types'
 
 const PopoverContext = createContext<PopoverContextValue>({
     onOpen: () => {},
-    popover: {},
+    popover: null,
     close: () => {},
     isOpen: false,
 });

src/components/PopoverProvider/types.ts

@@ -8,7 +8,7 @@ type PopoverContextProps = {
 
 type PopoverContextValue = {
     onOpen?: (popoverParams: AnchorRef) => void;
-    popover?: AnchorRef | Record<string, never> | null;
+    popover?: AnchorRef | null;
     close: (anchorRef?: RefObject<View | HTMLDivElement | Text>) => void;
     isOpen: boolean;
 };

src/components/Reactions/ReactionTooltipContent.tsx

@@ -23,7 +23,7 @@ type ReactionTooltipContentProps = Pick<WithCurrentUserPersonalDetailsProps, 'cu
     accountIDs: number[];
 };
 
-function ReactionTooltipContent({accountIDs, currentUserPersonalDetails = {}, emojiCodes, emojiName}: ReactionTooltipContentProps) {
+function ReactionTooltipContent({accountIDs, currentUserPersonalDetails, emojiCodes, emojiName}: ReactionTooltipContentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const users = useMemo(() => PersonalDetailsUtils.getPersonalDetailsByIDs(accountIDs, currentUserPersonalDetails.accountID, true), [currentUserPersonalDetails.accountID, accountIDs]);

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

@@ -4,6 +4,7 @@ import truncate from 'lodash/truncate';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import type {GestureResponderEvent} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -42,7 +43,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
 import type {OriginalMessageIOU} from '@src/types/onyx/OriginalMessage';
-import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {MoneyRequestPreviewProps, PendingMessageProps} from './types';
 
@@ -247,10 +247,8 @@ function MoneyRequestPreviewContent({
     };
 
     const getDisplayDeleteAmountText = (): string => {
-        const iouOriginalMessage: OriginalMessageIOU | EmptyObject = ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action) ?? {} : {};
-        const {amount = 0, currency = CONST.CURRENCY.USD} = iouOriginalMessage;
-
-        return CurrencyUtils.convertToDisplayString(amount, currency);
+        const iouOriginalMessage: OnyxEntry<OriginalMessageIOU> = ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action) ?? undefined : undefined;
+        return CurrencyUtils.convertToDisplayString(iouOriginalMessage?.amount, iouOriginalMessage?.currency);
     };
 
     const displayAmount = isDeleted ? getDisplayDeleteAmountText() : getDisplayAmountText();

src/components/ReportActionItem/ReportPreview.tsx

@@ -199,7 +199,7 @@ function ReportPreview({
         if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) {
             setIsHoldMenuVisible(true);
         } else {
-            IOU.approveMoneyRequest(iouReport ?? {}, true);
+            IOU.approveMoneyRequest(iouReport, true);
         }
     };
 

src/components/SelectionScreen.tsx

@@ -80,8 +80,8 @@ function SelectionScreen({
 }: SelectionScreenProps) {
     const {translate} = useLocalize();
 
-    const policy = PolicyUtils.getPolicy(policyID ?? '');
-    const isConnectionEmpty = isEmpty(policy.connections?.[connectionName]);
+    const policy = PolicyUtils.getPolicy(policyID);
+    const isConnectionEmpty = isEmpty(policy?.connections?.[connectionName]);
 
     return (
         <AccessOrNotFoundWrapper

src/components/SettlementButton.tsx

@@ -16,7 +16,6 @@ import type {ButtonSizeValue} from '@src/styles/utils/types';
 import type {LastPaymentMethod, Policy, Report} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
-import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
 import type {PaymentType} from './ButtonWithDropdownMenu/types';
@@ -55,7 +54,7 @@ type SettlementButtonProps = SettlementButtonOnyxProps & {
     chatReportID?: string;
 
     /** The IOU/Expense report we are paying */
-    iouReport?: OnyxEntry<Report> | EmptyObject;
+    iouReport?: OnyxEntry<Report>;
 
     /** Should we show the payment options? */
     shouldHidePaymentOptions?: boolean;
@@ -121,9 +120,9 @@ function SettlementButton({
     chatReportID = '',
     currency = CONST.CURRENCY.USD,
     enablePaymentsRoute,
-    // The "iouReport" and "nvpLastPaymentMethod" objects needs to be stable to prevent the "useMemo"
-    // hook from being recreated unnecessarily, hence the use of CONST.EMPTY_ARRAY and CONST.EMPTY_OBJECT
-    iouReport = CONST.EMPTY_OBJECT,
+    iouReport,
+    // The "nvpLastPaymentMethod" object needs to be stable to prevent the "useMemo"
+    // hook from being recreated unnecessarily, hence the use of CONST.EMPTY_OBJECT
     nvpLastPaymentMethod = CONST.EMPTY_OBJECT,
     isDisabled = false,
     isLoading = false,
@@ -148,7 +147,7 @@ function SettlementButton({
     const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID || -1}`);
     const isInvoiceReport = (!isEmptyObject(iouReport) && ReportUtils.isInvoiceReport(iouReport)) || false;
     const isPaidGroupPolicy = ReportUtils.isPaidGroupPolicyExpenseChat(chatReport);
-    const shouldShowPaywithExpensifyOption = !isPaidGroupPolicy || (!shouldHidePaymentOptions && ReportUtils.isPayer(session, iouReport as OnyxEntry<Report>));
+    const shouldShowPaywithExpensifyOption = !isPaidGroupPolicy || (!shouldHidePaymentOptions && ReportUtils.isPayer(session, iouReport));
     const shouldShowPayElsewhereOption = (!isPaidGroupPolicy || policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL) && !isInvoiceReport;
     const paymentButtonOptions = useMemo(() => {
         const buttonOptions = [];
@@ -238,7 +237,7 @@ function SettlementButton({
             if (confirmApproval) {
                 confirmApproval();
             } else {
-                IOU.approveMoneyRequest(iouReport ?? {});
+                IOU.approveMoneyRequest(iouReport);
             }
             return;
         }

src/components/withCurrentUserPersonalDetails.tsx

@@ -4,10 +4,8 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import type {PersonalDetails} from '@src/types/onyx';
 
-type CurrentUserPersonalDetails = PersonalDetails | Record<string, never>;
-
 type HOCProps = {
-    currentUserPersonalDetails: CurrentUserPersonalDetails;
+    currentUserPersonalDetails: PersonalDetails;
 };
 
 type WithCurrentUserPersonalDetailsProps = HOCProps;
@@ -32,4 +30,4 @@ export default function <TProps extends WithCurrentUserPersonalDetailsProps, TRe
     return React.forwardRef(WithCurrentUserPersonalDetails);
 }
 
-export type {WithCurrentUserPersonalDetailsProps, CurrentUserPersonalDetails};
+export type {WithCurrentUserPersonalDetailsProps};

src/hooks/useCurrentUserPersonalDetails.ts

@@ -1,19 +1,13 @@
 import {useMemo} from 'react';
 import {usePersonalDetails, useSession} from '@components/OnyxProvider';
-import CONST from '@src/CONST';
 import type {PersonalDetails} from '@src/types/onyx';
 
-type CurrentUserPersonalDetails = PersonalDetails | Record<string, never>;
-
 function useCurrentUserPersonalDetails() {
     const session = useSession();
-    const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT;
+    const personalDetails = usePersonalDetails();
     const accountID = session?.accountID ?? -1;
     const accountPersonalDetails = personalDetails?.[accountID];
-    const currentUserPersonalDetails: CurrentUserPersonalDetails = useMemo(
-        () => (accountPersonalDetails ? {...accountPersonalDetails, accountID} : {}) as CurrentUserPersonalDetails,
-        [accountPersonalDetails, accountID],
-    );
+    const currentUserPersonalDetails: PersonalDetails = useMemo(() => ({...accountPersonalDetails, accountID}), [accountPersonalDetails, accountID]);
 
     return currentUserPersonalDetails;
 }

src/hooks/useKeyboardShortcut.ts

@@ -26,7 +26,7 @@ type KeyboardShortcutConfig = {
  * Register a keyboard shortcut handler.
  * Recommendation: To ensure stability, wrap the `callback` function with the useCallback hook before using it with this hook.
  */
-export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: GestureResponderEvent | KeyboardEvent) => void, config: KeyboardShortcutConfig | Record<string, never> = {}) {
+export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: GestureResponderEvent | KeyboardEvent) => void, config: KeyboardShortcutConfig = {}) {
     const {
         captureOnInputs = true,
         shouldBubble = false,