-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #50602 from waterim/feat-50447
[No QA] Feat: Adding Direct Card Feed: Selecting feed type
- Loading branch information
Showing
8 changed files
with
176 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
107 changes: 107 additions & 0 deletions
107
src/pages/workspace/companyCards/addNew/SelectFeedType.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import React, {useEffect, useState} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {useOnyx} from 'react-native-onyx'; | ||
| import type {ValueOf} from 'type-fest'; | ||
| import FormHelpMessage from '@components/FormHelpMessage'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||
| import SelectionList from '@components/SelectionList'; | ||
| import RadioListItem from '@components/SelectionList/RadioListItem'; | ||
| import Text from '@components/Text'; | ||
| import TextLink from '@components/TextLink'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import * as CompanyCards from '@userActions/CompanyCards'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
|
|
||
| function SelectFeedType() { | ||
| const {translate} = useLocalize(); | ||
| const styles = useThemeStyles(); | ||
| const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD); | ||
| const [typeSelected, setTypeSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.FEED_TYPE>>(); | ||
| const [hasError, setHasError] = useState(false); | ||
|
|
||
| const submit = () => { | ||
| if (!typeSelected) { | ||
| setHasError(true); | ||
| } else { | ||
| // TODO: https://github.com/Expensify/App/issues/50448 - update the navigation when new screen exists | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| setTypeSelected(addNewCard?.data.selectedFeedType); | ||
| }, [addNewCard?.data.selectedFeedType]); | ||
|
|
||
| const handleBackButtonPress = () => { | ||
| CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK}); | ||
| }; | ||
|
|
||
| const data = [ | ||
| { | ||
| value: CONST.COMPANY_CARDS.FEED_TYPE.CUSTOM, | ||
| text: translate('workspace.companyCards.customFeed'), | ||
| alternateText: translate('workspace.companyCards.addNewCard.customFeedDetails'), | ||
| keyForList: CONST.COMPANY_CARDS.FEED_TYPE.CUSTOM, | ||
| isSelected: typeSelected === CONST.COMPANY_CARDS.FEED_TYPE.CUSTOM, | ||
| }, | ||
| { | ||
| value: CONST.COMPANY_CARDS.FEED_TYPE.DIRECT, | ||
| text: translate('workspace.companyCards.directFeed'), | ||
| alternateText: translate('workspace.companyCards.addNewCard.directFeedDetails'), | ||
| keyForList: CONST.COMPANY_CARDS.FEED_TYPE.DIRECT, | ||
| isSelected: typeSelected === CONST.COMPANY_CARDS.FEED_TYPE.DIRECT, | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| testID={SelectFeedType.displayName} | ||
| includeSafeAreaPaddingBottom={false} | ||
| shouldEnablePickerAvoiding={false} | ||
| shouldEnableMaxHeight | ||
| > | ||
| <HeaderWithBackButton | ||
| title={translate('workspace.companyCards.addCardFeed')} | ||
| onBackButtonPress={handleBackButtonPress} | ||
| /> | ||
|
|
||
| <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.companyCards.addNewCard.howDoYouWantToConnect')}</Text> | ||
| <Text style={[styles.textSupporting, styles.ph5, styles.mb6]}> | ||
| {`${translate('workspace.companyCards.addNewCard.learnMoreAboutConnections.text')}`} | ||
| <TextLink href={CONST.COMPANY_CARDS_CONNECT_CREDIT_CARDS_HELP_URL}>{`${translate('workspace.companyCards.addNewCard.learnMoreAboutConnections.linkText')}.`}</TextLink> | ||
| </Text> | ||
|
|
||
| <SelectionList | ||
| ListItem={RadioListItem} | ||
| onSelectRow={({value}) => { | ||
| setTypeSelected(value); | ||
| setHasError(false); | ||
| }} | ||
| sections={[{data}]} | ||
| shouldSingleExecuteRowSelect | ||
| isAlternateTextMultilineSupported | ||
| alternateTextNumberOfLines={3} | ||
| initiallyFocusedOptionKey={addNewCard?.data.selectedFeedType} | ||
| shouldUpdateFocusedIndex | ||
| showConfirmButton | ||
| confirmButtonText={translate('common.next')} | ||
| onConfirm={submit} | ||
| > | ||
| {hasError && ( | ||
| <View style={[styles.ph5, styles.mb3]}> | ||
| <FormHelpMessage | ||
| isError={hasError} | ||
| message={translate('workspace.companyCards.addNewCard.error.pleaseSelectFeedType')} | ||
| /> | ||
| </View> | ||
| )} | ||
| </SelectionList> | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
|
|
||
| SelectFeedType.displayName = 'SelectFeedType'; | ||
|
|
||
| export default SelectFeedType; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters