Merge pull request Expensify#32692 from lukemorawski/20354-MoneyReque…

…stParticipantsSelector_list_refactoring

20354 money request participants selector list refactoring

src/components/SelectionList/BaseListItem.js

@@ -24,6 +24,7 @@ function BaseListItem({
     canSelectMultiple = false,
     onSelectRow,
     onDismissError = () => {},
+    rightHandSideComponent,
     keyForList,
 }) {
     const theme = useTheme();
@@ -33,6 +34,18 @@ function BaseListItem({
     const isUserItem = lodashGet(item, 'icons.length', 0) > 0;
     const ListItem = isUserItem ? UserListItem : RadioListItem;
 
+    const rightHandSideComponentRender = () => {
+        if (canSelectMultiple || !rightHandSideComponent) {
+            return null;
+        }
+
+        if (typeof rightHandSideComponent === 'function') {
+            return rightHandSideComponent(item);
+        }
+
+        return rightHandSideComponent;
+    };
+
     return (
         <OfflineWithFeedback
             onClose={() => onDismissError(item)}
@@ -62,7 +75,10 @@ function BaseListItem({
                     ]}
                 >
                     {canSelectMultiple && (
-                        <View style={StyleUtils.getCheckboxPressableStyle()}>
+                        <View
+                            role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                            style={StyleUtils.getCheckboxPressableStyle()}
+                        >
                             <View
                                 style={[
                                     StyleUtils.getCheckboxContainerStyle(20),
@@ -98,7 +114,7 @@ function BaseListItem({
                         onSelectRow={onSelectRow}
                         showTooltip={showTooltip}
                     />
-                    {!canSelectMultiple && item.isSelected && (
+                    {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
                         <View
                             style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
                             accessible={false}
@@ -111,6 +127,7 @@ function BaseListItem({
                             </View>
                         </View>
                     )}
+                    {rightHandSideComponentRender()}
                 </View>
                 {Boolean(item.invitedSecondaryLogin) && (
                     <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>

src/components/SelectionList/BaseSelectionList.js

@@ -64,6 +64,7 @@ function BaseSelectionList({
     children,
     shouldStopPropagation = false,
     shouldUseDynamicMaxToRenderPerBatch = false,
+    rightHandSideComponent,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -317,6 +318,7 @@ function BaseSelectionList({
                 disableIsFocusStyle={disableInitialFocusOptionStyle}
                 onDismissError={onDismissError}
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+                rightHandSideComponent={rightHandSideComponent}
                 keyForList={item.keyForList}
             />
         );

src/components/SelectionList/selectionListPropTypes.js

@@ -22,7 +22,7 @@ const commonListItemPropTypes = {
     /** Whether to use the Checkbox (multiple selection) instead of the Checkmark (single selection) */
     canSelectMultiple: PropTypes.bool,
 
-    /** Callback to fire when the item is pressed */
+    /** Callback to fire when the item is selected */
     onSelectRow: PropTypes.func.isRequired,
 
     /** Callback to fire when an error is dismissed */
@@ -192,6 +192,9 @@ const propTypes = {
 
     /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */
     shouldUseDynamicMaxToRenderPerBatch: PropTypes.bool,
+
+    /** Right hand side component to display in the list item. Function has list item passed as the param */
+    rightHandSideComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };
 
 export {propTypes, baseListItemPropTypes, radioListItemPropTypes, userListItemPropTypes};

src/libs/OptionsListUtils.js

@@ -234,6 +234,7 @@ function getParticipantsOption(participant, personalDetails) {
         ],
         phoneNumber: lodashGet(detail, 'phoneNumber', ''),
         selected: participant.selected,
+        isSelected: participant.selected,
         searchText: participant.searchText,
     };
 }
@@ -607,6 +608,7 @@ function getPolicyExpenseReportOption(report) {
     option.text = ReportUtils.getPolicyName(expenseReport);
     option.alternateText = Localize.translateLocal('workspace.common.workspace');
     option.selected = report.selected;
+    option.isSelected = report.selected;
     return option;
 }
 
@@ -1231,6 +1233,25 @@ function getTaxRatesSection(policyTaxRates, selectedOptions, searchInputValue) {
     return policyRatesSections;
 }
 
+/**
+ * Checks if a report option is selected based on matching accountID or reportID.
+ *
+ * @param {Object} reportOption - The report option to be checked.
+ * @param {Object[]} selectedOptions - Array of selected options to compare with.
+ * @param {number} reportOption.accountID - The account ID of the report option.
+ * @param {number} reportOption.reportID - The report ID of the report option.
+ * @param {number} [selectedOptions[].accountID] - The account ID in the selected options.
+ * @param {number} [selectedOptions[].reportID] - The report ID in the selected options.
+ * @returns {boolean} True if the report option matches any of the selected options by accountID or reportID, false otherwise.
+ */
+function isReportSelected(reportOption, selectedOptions) {
+    if (!selectedOptions || selectedOptions.length === 0) {
+        return false;
+    }
+
+    return _.some(selectedOptions, (option) => (option.accountID && option.accountID === reportOption.accountID) || (option.reportID && option.reportID === reportOption.reportID));
+}
+
 /**
  * Build the options
  *
@@ -1490,6 +1511,8 @@ function getOptions(
                 }
             }
 
+            reportOption.isSelected = isReportSelected(reportOption, selectedOptions);
+
             recentReportOptions.push(reportOption);
 
             // Add this login to the exclude list so it won't appear when we process the personal details

src/pages/iou/MoneyRequestReferralProgramCTA.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Icon from '@components/Icon';
+import {Info} from '@components/Icon/Expensicons';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import Navigation from '@src/libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+
+type MoneyRequestReferralProgramCTAProps = {
+    referralContentType: typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST;
+};
+
+function MoneyRequestReferralProgramCTA({referralContentType}: MoneyRequestReferralProgramCTAProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    return (
+        <PressableWithoutFeedback
+            onPress={() => {
+                Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(referralContentType));
+            }}
+            style={[styles.p5, styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10}]}
+            accessibilityLabel="referral"
+            role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+        >
+            <Text>
+                {translate(`referralProgram.${referralContentType}.buttonText1`)}
+                <Text
+                    color={theme.success}
+                    style={styles.textStrong}
+                >
+                    {translate(`referralProgram.${referralContentType}.buttonText2`)}
+                </Text>
+            </Text>
+            <Icon
+                src={Info}
+                height={20}
+                width={20}
+            />
+        </PressableWithoutFeedback>
+    );
+}
+
+export default MoneyRequestReferralProgramCTA;