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

@@ -40,6 +40,7 @@ function BaseSelectionList({
  textInputLabel = '',
  textInputPlaceholder = '',
  textInputValue = '',
+ textInputHint = '',
  textInputMaxLength,
  inputMode = CONST.INPUT_MODE.TEXT,
  onChangeText,
@@ -63,6 +64,7 @@ function BaseSelectionList({
  children,
  shouldStopPropagation = false,
  shouldUseDynamicMaxToRenderPerBatch = false,
+ rightHandSideComponent,
 }) {
  const theme = useTheme();
  const styles = useThemeStyles();
@@ -316,6 +318,7 @@ function BaseSelectionList({
  disableIsFocusStyle={disableInitialFocusOptionStyle}
  onDismissError={onDismissError}
  shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+ rightHandSideComponent={rightHandSideComponent}
  keyForList={item.keyForList}
  />
  );
@@ -413,6 +416,7 @@ function BaseSelectionList({
  }}
  label={textInputLabel}
  accessibilityLabel={textInputLabel}
+ hint={textInputHint}
  role={CONST.ROLE.PRESENTATION}
  value={textInputValue}
  placeholder={textInputPlaceholder}

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
  *
@@ -1488,6 +1509,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;