Skip to content

Commit

Permalink
Merge pull request #50891 from narefyev91/update-existing-custom-feed…
Browse files Browse the repository at this point in the history 
…-flow

[NO QA]: Update existing custom feed flow
  • Loading branch information
@mountiny
mountiny authored Oct 17, 2024
2 parents cd2c7dd + ac5ea3f commit 77a37a1
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 53 deletions.
10 changes: 9 additions & 1 deletion src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,10 @@ function CardInstructionsStep({policyID}: CardInstructionsStepProps) {

const data = addNewCard?.data;
const feedProvider = data?.cardType;
const bank = data?.selectedBank;
const isStripeFeedProvider = feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.STRIPE;
const isAmexFeedProvider = feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX;
const isOtherBankSelected = bank === CONST.COMPANY_CARDS.BANKS.OTHER;

const buttonTranslation = isStripeFeedProvider ? translate('common.submit') : translate('common.next');

Expand All @@ -43,8 +45,14 @@ function CardInstructionsStep({policyID}: CardInstructionsStepProps) {
Navigation.goBack();
return;
}
if (!canUseDirectFeeds || isOtherBankSelected) {
CompanyCards.setAddNewCompanyCardStepAndData({
step: CONST.COMPANY_CARDS.STEP.CARD_NAME,
});
return;
}
CompanyCards.setAddNewCompanyCardStepAndData({
step: isAmexFeedProvider ? CONST.COMPANY_CARDS.STEP.CARD_DETAILS : CONST.COMPANY_CARDS.STEP.CARD_NAME,
step: CONST.COMPANY_CARDS.STEP.CARD_DETAILS,
});
};

Expand Down
110 changes: 65 additions & 45 deletions src/pages/workspace/companyCards/addNew/CardTypeStep.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import type {StyleProp, ViewStyle} 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 Icon from '@components/Icon';
import * as Illustrations from '@components/Icon/Illustrations';
import type {LocaleContextProps} from '@components/LocaleContextProvider';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
Expand All @@ -19,13 +21,76 @@ import * as CompanyCards from '@userActions/CompanyCards';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';

type AvailableCompanyCardTypes = {
isAmexAvailable?: boolean;
translate: LocaleContextProps['translate'];
typeSelected?: ValueOf<typeof CONST.COMPANY_CARDS.CARD_TYPE>;
styles: StyleProp<ViewStyle>;
};

function getAvailableCompanyCardTypes({isAmexAvailable, translate, typeSelected, styles}: AvailableCompanyCardTypes) {
const defaultTypes = [
{
value: CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
text: translate('workspace.companyCards.addNewCard.cardProviders.mastercard'),
keyForList: CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
leftElement: (
<Icon
src={Illustrations.MasterCardCompanyCardDetail}
height={variables.iconSizeExtraLarge}
width={variables.iconSizeExtraLarge}
additionalStyles={styles}
/>
),
},
{
value: CONST.COMPANY_CARDS.CARD_TYPE.VISA,
text: translate('workspace.companyCards.addNewCard.cardProviders.visa'),
keyForList: CONST.COMPANY_CARDS.CARD_TYPE.VISA,
isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.VISA,
leftElement: (
<Icon
src={Illustrations.VisaCompanyCardDetail}
height={variables.iconSizeExtraLarge}
width={variables.iconSizeExtraLarge}
additionalStyles={styles}
/>
),
},
];

if (!isAmexAvailable) {
return defaultTypes;
}

return [
{
value: CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
text: translate('workspace.companyCards.addNewCard.cardProviders.amex'),
keyForList: CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
leftElement: (
<Icon
src={Illustrations.AmexCardCompanyCardDetail}
height={variables.iconSizeExtraLarge}
width={variables.iconSizeExtraLarge}
additionalStyles={styles}
/>
),
},
...defaultTypes,
];
}

function CardTypeStep() {
const {translate} = useLocalize();
const styles = useThemeStyles();
const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
const [typeSelected, setTypeSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.CARD_TYPE>>();
const {canUseDirectFeeds} = usePermissions();
const [isError, setIsError] = useState(false);
const data = getAvailableCompanyCardTypes({isAmexAvailable: !canUseDirectFeeds, translate, typeSelected, styles: styles.mr3});

const submit = () => {
if (!typeSelected) {
Expand Down Expand Up @@ -53,51 +118,6 @@ function CardTypeStep() {
}
};

const data = [
{
value: CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
text: translate('workspace.companyCards.addNewCard.cardProviders.amex'),
keyForList: CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.AMEX,
leftElement: (
<Icon
src={Illustrations.AmexCardCompanyCardDetail}
height={variables.iconSizeExtraLarge}
width={variables.iconSizeExtraLarge}
additionalStyles={styles.mr3}
/>
),
},
{
value: CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
text: translate('workspace.companyCards.addNewCard.cardProviders.mastercard'),
keyForList: CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.MASTERCARD,
leftElement: (
<Icon
src={Illustrations.MasterCardCompanyCardDetail}
height={variables.iconSizeExtraLarge}
width={variables.iconSizeExtraLarge}
additionalStyles={styles.mr3}
/>
),
},
{
value: CONST.COMPANY_CARDS.CARD_TYPE.VISA,
text: translate('workspace.companyCards.addNewCard.cardProviders.visa'),
keyForList: CONST.COMPANY_CARDS.CARD_TYPE.VISA,
isSelected: typeSelected === CONST.COMPANY_CARDS.CARD_TYPE.VISA,
leftElement: (
<Icon
src={Illustrations.VisaCompanyCardDetail}
height={variables.iconSizeExtraLarge}
width={variables.iconSizeExtraLarge}
additionalStyles={styles.mr3}
/>
),
},
];

return (
<ScreenWrapper
testID={CardTypeStep.displayName}
Expand Down
13 changes: 9 additions & 4 deletions src/pages/workspace/companyCards/addNew/DetailsStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Text from '@components/Text';
import TextInput from '@components/TextInput';
import useAutoFocusInput from '@hooks/useAutoFocusInput';
import useLocalize from '@hooks/useLocalize';
import usePermissions from '@hooks/usePermissions';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ValidationUtils from '@libs/ValidationUtils';
import * as CompanyCards from '@userActions/CompanyCards';
Expand All @@ -21,18 +22,22 @@ function DetailsStep() {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {inputCallbackRef} = useAutoFocusInput();

const {canUseDirectFeeds} = usePermissions();
const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
const feedProvider = addNewCard?.data?.cardType;
const isStripeFeedProvider = feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.STRIPE;
const bank = addNewCard?.data?.selectedBank;
const isOtherBankSelected = bank === CONST.COMPANY_CARDS.BANKS.OTHER;

// TODO: add submit function
const submit = () => {};

const handleBackButtonPress = () => {
if (feedProvider === CONST.COMPANY_CARDS.CARD_TYPE.AMEX) {
CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS});
if (!canUseDirectFeeds || isOtherBankSelected) {
CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.CARD_NAME});
return;
}
CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.CARD_NAME});
CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS});
};

const validate = useCallback(
Expand Down
10 changes: 9 additions & 1 deletion src/pages/workspace/companyCards/addNew/SelectBankStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,22 @@ function SelectBankStep() {
const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
const [bankSelected, setBankSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.BANKS>>();
const [hasError, setHasError] = useState(false);
const isOtherBankSelected = bankSelected === CONST.COMPANY_CARDS.BANKS.OTHER;

const submit = () => {
if (!bankSelected) {
setHasError(true);
} else {
if (addNewCard?.data.selectedBank !== bankSelected) {
CompanyCards.clearAddNewCardFlow();
}
CompanyCards.setAddNewCompanyCardStepAndData({
step: CardUtils.getCorrectStepForSelectedBank(bankSelected),
data: {...(bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? {cardType: CONST.COMPANY_CARDS.CARD_TYPE.STRIPE, selectedBank: bankSelected} : {selectedBank: bankSelected})},
data: {
selectedBank: bankSelected,
cardTitle: !isOtherBankSelected ? bankSelected : undefined,
cardType: bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? CONST.COMPANY_CARDS.CARD_TYPE.STRIPE : undefined,
},
isEditing: false,
});
}
Expand Down
7 changes: 5 additions & 2 deletions src/pages/workspace/companyCards/addNew/SelectFeedType.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,12 @@ function SelectFeedType() {
const submit = () => {
if (!typeSelected) {
setHasError(true);
} else {
// TODO: https://github.com/Expensify/App/issues/50448 - update the navigation when new screen exists
return;
}
CompanyCards.setAddNewCompanyCardStepAndData({
step: typeSelected === CONST.COMPANY_CARDS.FEED_TYPE.DIRECT ? CONST.COMPANY_CARDS.STEP.SELECT_BANK : CONST.COMPANY_CARDS.STEP.CARD_TYPE,
data: {selectedFeedType: typeSelected},
});
};

useEffect(() => {
Expand Down

0 comments on commit 77a37a1

Please sign in to comment.