Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Card Settings] fix card lost/damaged flow #34098

Merged
merged 6 commits into from
Jan 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2025,9 +2025,11 @@ export default {
cardDamaged: 'My card was damaged',
cardLostOrStolen: 'My card was lost or stolen',
confirmAddressTitle: "Please confirm the address below is where you'd like us to send your new card.",
currentCardInfo: 'Your current card will be permanently deactivated as soon as your order is placed. Most cards arrive in a few business days.',
cardDamagedInfo: 'Your new card will arrive in 2-3 business days, and your existing card will continue to work until you activate your new one.',
cardLostOrStolenInfo: 'Your current card will be permanently deactivated as soon as your order is placed. Most cards arrive in a few business days.',
address: 'Address',
deactivateCardButton: 'Deactivate card',
shipNewCardButton: 'Ship new card',
addressError: 'Address is required',
reasonError: 'Reason is required',
},
Expand Down
4 changes: 3 additions & 1 deletion src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2512,9 +2512,11 @@ export default {
cardDamaged: 'Mi tarjeta está dañada',
cardLostOrStolen: 'He perdido o me han robado la tarjeta',
confirmAddressTitle: 'Confirma que la dirección que aparece a continuación es a la que deseas que te enviemos tu nueva tarjeta.',
currentCardInfo: 'La tarjeta actual se desactivará permanentemente en cuanto se realice el pedido. La mayoría de las tarjetas llegan en unos pocos días laborables.',
cardDamagedInfo: 'La nueva tarjeta te llegará en 2-3 días laborables y la tarjeta actual seguirá funcionando hasta que actives la nueva.',
cardLostOrStolenInfo: 'La tarjeta actual se desactivará permanentemente en cuanto realices el pedido. La mayoría de las tarjetas llegan en pocos días laborables.',
address: 'Dirección',
deactivateCardButton: 'Desactivar tarjeta',
shipNewCardButton: 'Enviar tarjeta nueva',
addressError: 'La dirección es obligatoria',
reasonError: 'Se requiere justificación',
},
Expand Down
8 changes: 4 additions & 4 deletions src/libs/actions/Card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@ function reportVirtualExpensifyCardFraud(cardID: number) {

/**
* Call the API to deactivate the card and request a new one
* @param cardId - id of the card that is going to be replaced
* @param cardID - id of the card that is going to be replaced
* @param reason - reason for replacement
*/
function requestReplacementExpensifyCard(cardId: number, reason: ReplacementReason) {
function requestReplacementExpensifyCard(cardID: number, reason: ReplacementReason) {
const optimisticData: OnyxUpdate[] = [
{
onyxMethod: Onyx.METHOD.MERGE,
Expand Down Expand Up @@ -88,12 +88,12 @@ function requestReplacementExpensifyCard(cardId: number, reason: ReplacementReas
];

type RequestReplacementExpensifyCardParams = {
cardId: number;
cardID: number;
reason: string;
};

const parameters: RequestReplacementExpensifyCardParams = {
cardId,
cardID,
reason,
};

Expand Down
21 changes: 16 additions & 5 deletions src/pages/settings/Wallet/ReportCardLostPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,19 @@ import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import assignedCardPropTypes from './assignedCardPropTypes';

const OPTIONS_KEYS = {
DAMAGED: 'damaged',
STOLEN: 'stolen',
};

/** Options for reason selector */
const OPTIONS = [
{
key: 'damaged',
key: OPTIONS_KEYS.DAMAGED,
label: 'reportCardLostOrDamaged.cardDamaged',
},
{
key: 'stolen',
key: OPTIONS_KEYS.STOLEN,
label: 'reportCardLostOrDamaged.cardLostOrStolen',
},
];
Expand Down Expand Up @@ -107,7 +112,7 @@ function ReportCardLostPage({
return;
}

Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain));
Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain));
}, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]);

useEffect(() => {
Expand Down Expand Up @@ -156,6 +161,8 @@ function ReportCardLostPage({
Navigation.goBack(ROUTES.SETTINGS_WALLET);
};

const isDamaged = reason && reason.key === OPTIONS_KEYS.DAMAGED;

return (
<ScreenWrapper
includeSafeAreaPaddingBottom
Expand All @@ -178,14 +185,18 @@ function ReportCardLostPage({
onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)}
numberOfLinesTitle={2}
/>
<Text style={[styles.mt3, styles.mh5]}>{translate('reportCardLostOrDamaged.currentCardInfo')}</Text>
{isDamaged ? (
<Text style={[styles.mt3, styles.mh5]}>{translate('reportCardLostOrDamaged.cardDamagedInfo')}</Text>
) : (
<Text style={[styles.mt3, styles.mh5]}>{translate('reportCardLostOrDamaged.cardLostOrStolenInfo')}</Text>
)}
</View>
<FormAlertWithSubmitButton
isAlertVisible={shouldShowAddressError}
onSubmit={handleSubmitSecondStep}
message={translate('reportCardLostOrDamaged.addressError')}
isLoading={formData.isLoading}
buttonText={translate('reportCardLostOrDamaged.deactivateCardButton')}
buttonText={isDamaged ? translate('reportCardLostOrDamaged.shipNewCardButton') : translate('reportCardLostOrDamaged.deactivateCardButton')}
/>
</>
) : (
Expand Down