From 4216e95adaafc85ad70f8c3d0d5ea9434bec6860 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 26 Jun 2024 10:31:10 +0200 Subject: [PATCH 01/35] feat: add selection list to assignee step --- src/pages/workspace/card/issueNew/AssigneeStep.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/card/issueNew/AssigneeStep.tsx b/src/pages/workspace/card/issueNew/AssigneeStep.tsx index 5012ba294518..448695b3e05f 100644 --- a/src/pages/workspace/card/issueNew/AssigneeStep.tsx +++ b/src/pages/workspace/card/issueNew/AssigneeStep.tsx @@ -4,6 +4,8 @@ import FormProvider from '@components/Form/FormProvider'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; +import UserListItem from '@components/SelectionList/UserListItem'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -49,8 +51,11 @@ function AssigneeStep() { onSubmit={submit} style={[styles.mh5, styles.flexGrow1]} > - {/* TODO: the content will be created in https://github.com/Expensify/App/issues/44309 */} - + {}} + /> ); From 93de31b774002237d41a64050f901076d40a0751 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 26 Jun 2024 10:54:26 +0200 Subject: [PATCH 02/35] feat: UI for card name step --- .../workspace/card/issueNew/CardNameStep.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/card/issueNew/CardNameStep.tsx b/src/pages/workspace/card/issueNew/CardNameStep.tsx index 9b48d6417732..3d445b4f85c4 100644 --- a/src/pages/workspace/card/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/card/issueNew/CardNameStep.tsx @@ -1,20 +1,25 @@ import React from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; +import TextInput from '@components/TextInput'; 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'; +import INPUT_IDS from '@src/types/form/IssueNewExpensifyCardForm'; function CardNameStep() { const {translate} = useLocalize(); const styles = useThemeStyles(); + // TODO: validation + const submit = () => { // TODO: the logic will be created in https://github.com/Expensify/App/issues/44309 Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.CONFIRMATION); @@ -48,8 +53,16 @@ function CardNameStep() { onSubmit={submit} style={[styles.mh5, styles.flexGrow1]} > - {/* TODO: the content will be created in https://github.com/Expensify/App/issues/44309 */} - + ); From c27e5ef2a5bd12b5ecb76c3a480d5d32981fa3a9 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 26 Jun 2024 11:41:38 +0200 Subject: [PATCH 03/35] feat: UI for limit step --- src/pages/workspace/card/issueNew/LimitStep.tsx | 9 +++++++-- src/types/form/IssueNewExpensifyCardForm.ts | 2 ++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/card/issueNew/LimitStep.tsx b/src/pages/workspace/card/issueNew/LimitStep.tsx index dd2e80a6612a..294015cc208c 100644 --- a/src/pages/workspace/card/issueNew/LimitStep.tsx +++ b/src/pages/workspace/card/issueNew/LimitStep.tsx @@ -1,6 +1,8 @@ import React from 'react'; import {View} from 'react-native'; +import AmountForm from '@components/AmountForm'; import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -10,6 +12,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as Card from '@userActions/Card'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import INPUT_IDS from '@src/types/form/IssueNewExpensifyCardForm'; function LimitStep() { const {translate} = useLocalize(); @@ -48,8 +51,10 @@ function LimitStep() { onSubmit={submit} style={[styles.mh5, styles.flexGrow1]} > - {/* TODO: the content will be created in https://github.com/Expensify/App/issues/44309 */} - + ); diff --git a/src/types/form/IssueNewExpensifyCardForm.ts b/src/types/form/IssueNewExpensifyCardForm.ts index 06ff2c421968..01ae3cc4d39a 100644 --- a/src/types/form/IssueNewExpensifyCardForm.ts +++ b/src/types/form/IssueNewExpensifyCardForm.ts @@ -3,6 +3,7 @@ import type Form from './Form'; const INPUT_IDS = { CARD_NAME: 'cardName', + LIMIT: 'limit', } as const; type InputID = ValueOf; @@ -11,6 +12,7 @@ type IssueNewExpensifyCardForm = Form< InputID, { [INPUT_IDS.CARD_NAME]: string; + [INPUT_IDS.LIMIT]: string; } >; From c3ea4e32be22292afd6979a140fd3cd3b6f7f448 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 26 Jun 2024 15:00:57 +0200 Subject: [PATCH 04/35] feat: limit type step UI --- .../workspace/card/issueNew/LimitTypeStep.tsx | 54 ++++++++++++++----- 1 file changed, 42 insertions(+), 12 deletions(-) diff --git a/src/pages/workspace/card/issueNew/LimitTypeStep.tsx b/src/pages/workspace/card/issueNew/LimitTypeStep.tsx index b1249e33e3c4..06c90b4eef41 100644 --- a/src/pages/workspace/card/issueNew/LimitTypeStep.tsx +++ b/src/pages/workspace/card/issueNew/LimitTypeStep.tsx @@ -1,15 +1,16 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; -import FormProvider from '@components/Form/FormProvider'; +import Button from '@components/Button'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; 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 LimitTypeStep() { const {translate} = useLocalize(); @@ -24,6 +25,30 @@ function LimitTypeStep() { Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.CARD_TYPE); }; + const data = useMemo( + () => [ + { + value: CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART, + text: translate('workspace.card.issueNewCard.smartLimit'), + alternateText: translate('workspace.card.issueNewCard.smartLimitDescription'), + keyForList: CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART, + }, + { + value: CONST.EXPENSIFY_CARD.LIMIT_TYPES.FIXED, + text: translate('workspace.card.issueNewCard.fixedAmount'), + alternateText: translate('workspace.card.issueNewCard.fixedAmountDescription'), + keyForList: CONST.EXPENSIFY_CARD.LIMIT_TYPES.FIXED, + }, + { + value: CONST.EXPENSIFY_CARD.LIMIT_TYPES.MONTHLY, + text: translate('workspace.card.issueNewCard.monthly'), + alternateText: translate('workspace.card.issueNewCard.monthlyDescription'), + keyForList: CONST.EXPENSIFY_CARD.LIMIT_TYPES.FIXED, + }, + ], + [translate], + ); + return ( {translate('workspace.card.issueNewCard.chooseLimitType')} - - {/* TODO: the content will be created in https://github.com/Expensify/App/issues/44309 */} - - + + {}} + sections={[{data}]} + /> +