-
Notifications
You must be signed in to change notification settings - Fork 3k
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 #44376 from koko57/feat/card-flow
[No QA] Card flow screens
- Loading branch information
Showing
20 changed files
with
542 additions
and
6 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import FormProvider from '@components/Form/FormProvider'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; | ||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||
| import Text from '@components/Text'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import Navigation from '@navigation/Navigation'; | ||
| import * as Card from '@userActions/Card'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
|
|
||
| function AssigneeStep() { | ||
| const {translate} = useLocalize(); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| const submit = () => { | ||
| // TODO: the logic will be created in https://github.com/Expensify/App/issues/44309 | ||
| Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.CARD_TYPE); | ||
| }; | ||
|
|
||
| const handleBackButtonPress = () => { | ||
| Navigation.goBack(); | ||
| }; | ||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| testID={AssigneeStep.displayName} | ||
| includeSafeAreaPaddingBottom={false} | ||
| shouldEnablePickerAvoiding={false} | ||
| shouldEnableMaxHeight | ||
| > | ||
| <HeaderWithBackButton | ||
| title={translate('workspace.card.issueCard')} | ||
| onBackButtonPress={handleBackButtonPress} | ||
| /> | ||
| <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}> | ||
| <InteractiveStepSubHeader | ||
| startStepIndex={0} | ||
| stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES} | ||
| /> | ||
| </View> | ||
| <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.whoNeedsCard')}</Text> | ||
| <FormProvider | ||
| formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM} | ||
| submitButtonText={translate('common.next')} | ||
| onSubmit={submit} | ||
| style={[styles.mh5, styles.flexGrow1]} | ||
| > | ||
| {/* TODO: the content will be created in https://github.com/Expensify/App/issues/44309 */} | ||
| <View /> | ||
| </FormProvider> | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
|
|
||
| AssigneeStep.displayName = 'AssigneeStep'; | ||
|
|
||
| export default AssigneeStep; |
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,60 @@ | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import FormProvider from '@components/Form/FormProvider'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; | ||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||
| import Text from '@components/Text'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import * as Card from '@userActions/Card'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
|
|
||
| function CardNameStep() { | ||
| const {translate} = useLocalize(); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| const submit = () => { | ||
| // TODO: the logic will be created in https://github.com/Expensify/App/issues/44309 | ||
| Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.CONFIRMATION); | ||
| }; | ||
|
|
||
| const handleBackButtonPress = () => { | ||
| Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.LIMIT); | ||
| }; | ||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| testID={CardNameStep.displayName} | ||
| includeSafeAreaPaddingBottom={false} | ||
| shouldEnablePickerAvoiding={false} | ||
| shouldEnableMaxHeight | ||
| > | ||
| <HeaderWithBackButton | ||
| title={translate('workspace.card.issueCard')} | ||
| onBackButtonPress={handleBackButtonPress} | ||
| /> | ||
| <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}> | ||
| <InteractiveStepSubHeader | ||
| startStepIndex={4} | ||
| stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES} | ||
| /> | ||
| </View> | ||
| <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.giveItName')}</Text> | ||
| <FormProvider | ||
| formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM} | ||
| submitButtonText={translate('common.next')} | ||
| onSubmit={submit} | ||
| style={[styles.mh5, styles.flexGrow1]} | ||
| > | ||
| {/* TODO: the content will be created in https://github.com/Expensify/App/issues/44309 */} | ||
| <View /> | ||
| </FormProvider> | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
|
|
||
| CardNameStep.displayName = 'CardNameStep'; | ||
|
|
||
| export default CardNameStep; |
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,60 @@ | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import FormProvider from '@components/Form/FormProvider'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; | ||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||
| import Text from '@components/Text'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import * as Card from '@userActions/Card'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
|
|
||
| function CardTypeStep() { | ||
| const {translate} = useLocalize(); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| const submit = () => { | ||
| // TODO: the logic will be created in https://github.com/Expensify/App/issues/44309 | ||
| Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE); | ||
| }; | ||
|
|
||
| const handleBackButtonPress = () => { | ||
| Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.ASSIGNEE); | ||
| }; | ||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| testID={CardTypeStep.displayName} | ||
| includeSafeAreaPaddingBottom={false} | ||
| shouldEnablePickerAvoiding={false} | ||
| shouldEnableMaxHeight | ||
| > | ||
| <HeaderWithBackButton | ||
| title={translate('workspace.card.issueCard')} | ||
| onBackButtonPress={handleBackButtonPress} | ||
| /> | ||
| <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}> | ||
| <InteractiveStepSubHeader | ||
| startStepIndex={1} | ||
| stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES} | ||
| /> | ||
| </View> | ||
| <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.chooseCardType')}</Text> | ||
| <FormProvider | ||
| formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM} | ||
| submitButtonText={translate('common.next')} | ||
| onSubmit={submit} | ||
| style={[styles.mh5, styles.flexGrow1]} | ||
| > | ||
| {/* TODO: the content will be created in https://github.com/Expensify/App/issues/44309 */} | ||
| <View /> | ||
| </FormProvider> | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
|
|
||
| CardTypeStep.displayName = 'CardTypeStep'; | ||
|
|
||
| export default CardTypeStep; |
Oops, something went wrong.