[TS migration] Migrate 'MoneyRequestConfirmationList.js' component to TypeScript

src/components/ButtonWithDropdownMenu.tsx

@@ -10,33 +10,30 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {AnchorPosition} from '@styles/index';
 import CONST from '@src/CONST';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
-import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 import Button from './Button';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PopoverMenu from './PopoverMenu';
 
-type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE>;
-
-type DropdownOption = {
-    value: PaymentType;
+type DropdownOption<T> = {
+    value: T;
     text: string;
-    icon: IconAsset;
+    icon?: IconAsset;
     iconWidth?: number;
     iconHeight?: number;
     iconDescription?: string;
 };
 
-type ButtonWithDropdownMenuProps = {
+type ButtonWithDropdownMenuProps<T> = {
     /** Text to display for the menu header */
     menuHeaderText?: string;
 
     /** Callback to execute when the main button is pressed */
-    onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: PaymentType) => void;
+    onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: T) => void;
 
     /** Callback to execute when a dropdown option is selected */
-    onOptionSelected?: (option: DropdownOption) => void;
+    onOptionSelected?: (option: DropdownOption<T>) => void;
 
     /** Call the onPress function on main button when Enter key is pressed */
     pressOnEnter?: boolean;
@@ -55,19 +52,19 @@ type ButtonWithDropdownMenuProps = {
 
     /** Menu options to display */
     /** e.g. [{text: 'Pay with Expensify', icon: Wallet}] */
-    options: DropdownOption[];
+    options: Array<DropdownOption<T>>;
 
     /** The anchor alignment of the popover menu */
     anchorAlignment?: AnchorAlignment;
 
     /* ref for the button */
-    buttonRef: RefObject<View>;
+    buttonRef?: RefObject<View>;
 
     /** The priority to assign the enter key event listener to buttons. 0 is the highest priority. */
     enterKeyEventListenerPriority?: number;
 };
 
-function ButtonWithDropdownMenu({
+function ButtonWithDropdownMenu<T>({
     isLoading = false,
     isDisabled = false,
     pressOnEnter = false,
@@ -83,7 +80,7 @@ function ButtonWithDropdownMenu({
     options,
     onOptionSelected,
     enterKeyEventListenerPriority = 0,
-}: ButtonWithDropdownMenuProps) {
+}: ButtonWithDropdownMenuProps<T>) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();

src/components/ConfirmedRoute.tsx

@@ -25,13 +25,13 @@ type ConfirmedRoutePropsOnyxProps = {
 
 type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & {
     /** Transaction that stores the distance request data */
-    transaction: Transaction;
+    transaction: Transaction | undefined;
 };
 
 function ConfirmedRoute({mapboxAccessToken, transaction}: ConfirmedRouteProps) {
     const {isOffline} = useNetwork();
-    const {route0: route} = transaction.routes ?? {};
-    const waypoints = transaction.comment?.waypoints ?? {};
+    const {route0: route} = transaction?.routes ?? {};
+    const waypoints = transaction?.comment?.waypoints ?? {};
     const coordinates = route?.geometry?.coordinates ?? [];
     const theme = useTheme();
     const styles = useThemeStyles();