From bf94f8a3739c755288d44f6e3a97140cdd2628d2 Mon Sep 17 00:00:00 2001 From: Zuzanna Furtak Date: Thu, 20 Nov 2025 14:59:17 +0100 Subject: [PATCH 1/3] Make AmexCustomFeed use new SelectionList --- .../SelectionList/BaseSelectionList.tsx | 2 ++ src/components/SelectionList/types.ts | 3 +- .../companyCards/addNew/AmexCustomFeed.tsx | 30 +++++++++++-------- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 80c7e0bf78f0..15e4d171377b 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -45,6 +45,7 @@ function BaseSelectionList({ onEndReached, onEndReachedThreshold, confirmButtonConfig, + children, customListHeader, customListHeaderContent, footerContent, @@ -417,6 +418,7 @@ function BaseSelectionList({ } /> + {children} )} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index fddf503cdf2a..cdc868f7b07c 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,9 +1,10 @@ import type {ReactElement, RefObject} from 'react'; import type {GestureResponderEvent, InputModeOptions, StyleProp, TextStyle, ViewStyle} from 'react-native'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; +import type ChildrenProps from '@src/types/utils/ChildrenProps'; import type {ListItem, ValidListItem} from './ListItem/types'; -type SelectionListProps = { +type SelectionListProps = Partial & { /** Array of items to display in the list */ data: TItem[]; diff --git a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx index 0f1decdf67cf..76a048cde907 100644 --- a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx +++ b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx @@ -1,12 +1,12 @@ -import React, {useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; import FormHelpMessage from '@components/FormHelpMessage'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import RenderHTML from '@components/RenderHTML'; import ScreenWrapper from '@components/ScreenWrapper'; -import SelectionList from '@components/SelectionListWithSections'; -import RadioListItem from '@components/SelectionListWithSections/RadioListItem'; +import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/ListItem/RadioListItem'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; @@ -22,7 +22,7 @@ function AmexCustomFeed() { const [typeSelected, setTypeSelected] = useState>(); const [hasError, setHasError] = useState(false); - const submit = () => { + const submit = useCallback(() => { if (!typeSelected) { setHasError(true); return; @@ -34,7 +34,7 @@ function AmexCustomFeed() { selectedAmexCustomFeed: typeSelected, }, }); - }; + }, [typeSelected]); useEffect(() => { setTypeSelected(addNewCard?.data.selectedAmexCustomFeed); @@ -68,6 +68,15 @@ function AmexCustomFeed() { }, ]; + const confirmButtonConfig = useMemo( + () => ({ + showButton: true, + text: translate('common.next'), + onConfirm: submit, + }), + [submit, translate], + ); + return ( { setTypeSelected(value); setHasError(false); }} - sections={[{data}]} + confirmButtonConfig={confirmButtonConfig} shouldSingleExecuteRowSelect - isAlternateTextMultilineSupported - alternateTextNumberOfLines={3} - initiallyFocusedOptionKey={addNewCard?.data.selectedAmexCustomFeed} + alternateNumberOfSupportedLines={3} + initiallyFocusedItemKey={addNewCard?.data.selectedAmexCustomFeed ?? undefined} shouldUpdateFocusedIndex - showConfirmButton - confirmButtonText={translate('common.next')} - onConfirm={submit} addBottomSafeAreaPadding > {hasError && ( From 1204dc3742e802b05e46ebabd4e332e008e96f04 Mon Sep 17 00:00:00 2001 From: Zuzanna Furtak Date: Thu, 20 Nov 2025 15:10:01 +0100 Subject: [PATCH 2/3] Fix lint --- .../workspace/companyCards/addNew/AmexCustomFeed.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx index 76a048cde907..78eca0b81b07 100644 --- a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx +++ b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx @@ -11,14 +11,14 @@ import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as CompanyCards from '@userActions/CompanyCards'; +import {setAddNewCompanyCardStepAndData} from '@userActions/CompanyCards'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; function AmexCustomFeed() { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD); + const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD, {canBeMissing: true}); const [typeSelected, setTypeSelected] = useState>(); const [hasError, setHasError] = useState(false); @@ -27,7 +27,7 @@ function AmexCustomFeed() { setHasError(true); return; } - CompanyCards.setAddNewCompanyCardStepAndData({ + setAddNewCompanyCardStepAndData({ step: typeSelected === CONST.COMPANY_CARDS.AMEX_CUSTOM_FEED.CORPORATE ? CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS : CONST.COMPANY_CARDS.STEP.BANK_CONNECTION, data: { feedType: CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX, @@ -41,7 +41,7 @@ function AmexCustomFeed() { }, [addNewCard?.data.selectedAmexCustomFeed]); const handleBackButtonPress = () => { - CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK}); + setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK}); }; const data = [ From bad7573ad665714dc8a055d5d862f1cd947a78b3 Mon Sep 17 00:00:00 2001 From: Zuzanna Furtak Date: Fri, 21 Nov 2025 10:38:13 +0100 Subject: [PATCH 3/3] Fix typescript --- src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx index 78eca0b81b07..380b2d7162af 100644 --- a/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx +++ b/src/pages/workspace/companyCards/addNew/AmexCustomFeed.tsx @@ -68,7 +68,7 @@ function AmexCustomFeed() { }, ]; - const confirmButtonConfig = useMemo( + const confirmButtonOptions = useMemo( () => ({ showButton: true, text: translate('common.next'), @@ -101,7 +101,7 @@ function AmexCustomFeed() { setTypeSelected(value); setHasError(false); }} - confirmButtonConfig={confirmButtonConfig} + confirmButtonOptions={confirmButtonOptions} shouldSingleExecuteRowSelect alternateNumberOfSupportedLines={3} initiallyFocusedItemKey={addNewCard?.data.selectedAmexCustomFeed ?? undefined}