Clarify Approval Options When Held Expenses Exist

src/components/ButtonWithDropdownMenu/index.tsx

@@ -59,8 +59,10 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
         shouldUseModalPaddingStyle = true,
         shouldUseShortForm = false,
         shouldUseOptionIcon = false,
+        headerTextStyles,
         shouldStayNormalOnDisable = false,
         sentryLabel,
+        shouldPutHeaderTextAfterBackButton = false,
     } = props;
 
     const icons = useMemoizedLazyExpensifyIcons(['DownArrow']);
@@ -273,6 +275,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                             setIsMenuVisible(false);
                         }
                     }}
+                    headerStyles={headerTextStyles}
                     anchorPosition={popoverAnchorPosition}
                     shouldShowSelectedItemCheck={shouldShowSelectedItemCheck}
                     anchorRef={nullCheckRef(dropdownAnchor)}
@@ -302,6 +305,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                         shouldCallAfterModalHide: true,
                         subMenuItems: item.subMenuItems?.map((subItem) => ({...subItem, shouldCallAfterModalHide: true})),
                     }))}
+                    shouldPutHeaderTextAfterBackButton={shouldPutHeaderTextAfterBackButton}
                 />
             )}
         </View>

src/components/ButtonWithDropdownMenu/types.ts

@@ -158,8 +158,14 @@ type ButtonWithDropdownMenuProps<TValueType> = WithSentryLabel & {
     /** Whether to display the option icon when only one option is available */
     shouldUseOptionIcon?: boolean;
 
+    /** Used to apply styles specifically to the header text */
+    headerTextStyles?: StyleProp<TextStyle>;
+
     /** Reference to the outer element */
     ref?: React.Ref<ButtonWithDropdownMenuRef>;
+
+    /** Whether to put the header text after the back button */
+    shouldPutHeaderTextAfterBackButton?: boolean;
 };
 
 type ButtonWithDropdownMenuRef = {

src/components/ExpenseHeaderApprovalButton.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type IconAsset from '@src/types/utils/IconAsset';
+import Button from './Button';
+import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
+import type {LocaleContextProps} from './LocaleContextProvider';
+
+type ExpenseHeaderApprovalButtonProps = {
+    /** Whether any transaction is on hold */
+    isAnyTransactionOnHold: boolean;
+
+    /** Whether delegate access is restricted */
+    isDelegateAccessRestricted: boolean;
+
+    /** Whether the report has only held expenses */
+    hasOnlyHeldExpenses: boolean;
+
+    /** Whether there is a valid non-held amount */
+    hasValidNonHeldAmount: boolean;
+
+    /** The non-held amount string */
+    nonHeldAmount: string | undefined;
+
+    /** The full amount string */
+    fullAmount: string;
+
+    /** Callback when approval is confirmed */
+    onApprove: (isFullApproval: boolean) => void;
+
+    /** Whether the button is disabled */
+    isDisabled?: boolean;
+};
+
+type ApprovalOption = {
+    value: string;
+    text: string;
+    icon: IconAsset;
+    onSelected: () => void;
+    keyForList: string;
+};
+
+type ApprovalDropdownOptionProps = {
+    nonHeldAmount: string | undefined;
+    fullAmount: string;
+    hasValidNonHeldAmount: boolean;
+    hasOnlyHeldExpenses: boolean;
+    onPartialApprove: () => void;
+    onFullApprove: () => void;
+    translate: LocaleContextProps['translate'];
+    illustrations: Record<'ThumbsUp' | 'DocumentCheck', IconAsset>;
+};
+
+/**
+ * Generates dropdown options for approve button when there are held expenses
+ */
+function getApprovalDropdownOptions({
+    nonHeldAmount,
+    fullAmount,
+    hasValidNonHeldAmount,
+    hasOnlyHeldExpenses,
+    onPartialApprove,
+    onFullApprove,
+    translate,
+    illustrations,
+}: ApprovalDropdownOptionProps): ApprovalOption[] {
+    const APPROVE_PARTIAL = 'approve_partial';
+    const APPROVE_FULL = 'approve_full';
+    const options: ApprovalOption[] = [];
+
+    if (nonHeldAmount && hasValidNonHeldAmount && !hasOnlyHeldExpenses) {
+        options.push({
+            value: APPROVE_PARTIAL,
+            text: `${translate('iou.approveOnly')} ${nonHeldAmount}`,
+            icon: illustrations.ThumbsUp,
+            onSelected: onPartialApprove,
+            keyForList: APPROVE_PARTIAL,
+        });
+    }
+
+    options.push({
+        value: APPROVE_FULL,
+        text: `${translate('iou.approve')} ${fullAmount}`,
+        icon: illustrations.DocumentCheck,
+        onSelected: onFullApprove,
+        keyForList: APPROVE_FULL,
+    });
+
+    return options;
+}
+
+function ExpenseHeaderApprovalButton({
+    isAnyTransactionOnHold,
+    isDelegateAccessRestricted,
+    hasOnlyHeldExpenses,
+    hasValidNonHeldAmount,
+    nonHeldAmount,
+    fullAmount,
+    onApprove,
+    isDisabled = false,
+}: ExpenseHeaderApprovalButtonProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyExpensifyIcons(['ThumbsUp', 'DocumentCheck']);
+
+    const shouldShowDropdown = isAnyTransactionOnHold && !isDelegateAccessRestricted;
+
+    if (shouldShowDropdown) {
+        const approvalOptions = getApprovalDropdownOptions({
+            nonHeldAmount: !hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined,
+            fullAmount,
+            hasValidNonHeldAmount,
+            hasOnlyHeldExpenses,
+            onPartialApprove: () => onApprove(false),
+            onFullApprove: () => onApprove(true),
+            translate,
+            illustrations,
+        });
+
+        if (approvalOptions.length > 1) {
+            return (
+                <ButtonWithDropdownMenu
+                    success
+                    options={approvalOptions}
+                    menuHeaderText={translate('iou.confirmApprovalWithHeldAmount')}
+                    onPress={() => {}}
+                    customText={translate('iou.approve')}
+                    headerTextStyles={styles.lineHeightNormal}
+                    shouldAlwaysShowDropdownMenu
+                    isSplitButton={false}
+                    isDisabled={isDisabled}
+                />
+            );
+        }
+    }
+
+    return (
+        <Button
+            success
+            onPress={() => onApprove(true)}
+            text={translate('iou.approve')}
+            sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
+            isDisabled={isDisabled}
+        />
+    );
+}
+
+export default ExpenseHeaderApprovalButton;
+export {getApprovalDropdownOptions};

src/components/Icon/Expensicons.ts

@@ -38,6 +38,7 @@ import Copy from '@assets/images/copy.svg';
 import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
+import DocumentCheck from '@assets/images/document-check.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
 import DotIndicatorUnfilled from '@assets/images/dot-indicator-unfilled.svg';
@@ -325,6 +326,7 @@ export {
     UserLock,
     NetSuiteExport,
     QBOExport,
+    DocumentCheck,
     SageIntacctExport,
     XeroExport,
     LuggageWithLines,

src/components/Icon/chunks/expensify-icons.chunk.ts

@@ -65,6 +65,7 @@ import CreditCardExclamation from '@assets/images/credit-card-exclamation.svg';
 import CreditCardHourglass from '@assets/images/credit-card-hourglass.svg';
 import CreditCard from '@assets/images/creditcard.svg';
 import Crosshair from '@assets/images/crosshair.svg';
+import DocumentCheck from '@assets/images/document-check.svg';
 import DocumentMerge from '@assets/images/document-merge.svg';
 import Document from '@assets/images/document.svg';
 import DotIndicatorUnfilled from '@assets/images/dot-indicator-unfilled.svg';
@@ -487,6 +488,7 @@ const Expensicons = {
     XeroExport,
     ArrowCircleClockwise,
     LuggageWithLines,
+    DocumentCheck,
     TreasureChestGreenWithSparkle,
     UserShield,
 };