Skip to content

Commit ebde594

Browse files
mountinymountiny
authored
Merge pull request Expensify#64156 from DylanDylann/new-success-page-on-report-card
[Internal QA] Add new success page on the report card lost or damage flow
2 parents d109774 + 37484c7 commit ebde594

20 files changed

Lines changed: 1811 additions & 86 deletions

File tree

‎assets/images/product-illustrations/illustration__card-replacement-success.svg‎

Lines changed: 1643 additions & 0 deletions
Loading

‎src/components/ConfirmationPage.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import type {TextStyle, ViewStyle} from 'react-native';
3-
import {View} from 'react-native';
2+
import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
3+
import {StyleSheet, View} from 'react-native';
44
import useThemeStyles from '@hooks/useThemeStyles';
55
import isIllustrationLottieAnimation from '@libs/isIllustrationLottieAnimation';
66
import type IconAsset from '@src/types/utils/IconAsset';
@@ -47,10 +47,10 @@ type ConfirmationPageProps = {
4747
headingStyle?: TextStyle;
4848

4949
/** Additional style for the animation */
50-
illustrationStyle?: ViewStyle;
50+
illustrationStyle?: StyleProp<ViewStyle>;
5151

5252
/** Additional style for the description */
53-
descriptionStyle?: TextStyle;
53+
descriptionStyle?: StyleProp<TextStyle>;
5454

5555
/** Additional style for the cta */
5656
ctaStyle?: TextStyle;
@@ -60,6 +60,9 @@ type ConfirmationPageProps = {
6060

6161
/** Additional style for the container */
6262
containerStyle?: ViewStyle;
63+
64+
/** Additional style for the inner container */
65+
innerContainerStyle?: ViewStyle;
6366
};
6467

6568
function ConfirmationPage({
@@ -79,22 +82,23 @@ function ConfirmationPage({
7982
ctaStyle,
8083
footerStyle,
8184
containerStyle,
85+
innerContainerStyle,
8286
}: ConfirmationPageProps) {
8387
const styles = useThemeStyles();
8488
const isLottie = isIllustrationLottieAnimation(illustration);
8589

8690
return (
8791
<View style={[styles.flex1, containerStyle]}>
88-
<View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
92+
<View style={[styles.screenCenteredContainer, styles.alignItemsCenter, innerContainerStyle]}>
8993
{isLottie ? (
9094
<Lottie
9195
source={illustration}
9296
autoPlay
9397
loop
9498
style={[styles.confirmationAnimation, illustrationStyle]}
9599
webStyle={{
96-
width: (illustrationStyle?.width as number) ?? styles.confirmationAnimation.width,
97-
height: (illustrationStyle?.height as number) ?? styles.confirmationAnimation.height,
100+
width: (StyleSheet.flatten(illustrationStyle)?.width as number) ?? styles.confirmationAnimation.width,
101+
height: (StyleSheet.flatten(illustrationStyle)?.height as number) ?? styles.confirmationAnimation.height,
98102
}}
99103
/>
100104
) : (

‎src/components/Icon/Illustrations.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import EmptyStateTravel from '@assets/images/product-illustrations/emptystate__t
4444
import FolderWithPapers from '@assets/images/product-illustrations/folder-with-papers.svg';
4545
import GpsTrackOrange from '@assets/images/product-illustrations/gps-track--orange.svg';
4646
import Hands from '@assets/images/product-illustrations/home-illustration-hands.svg';
47+
import CardReplacementSuccess from '@assets/images/product-illustrations/illustration__card-replacement-success.svg';
4748
import InvoiceOrange from '@assets/images/product-illustrations/invoice--orange.svg';
4849
import JewelBoxBlue from '@assets/images/product-illustrations/jewel-box--blue.svg';
4950
import JewelBoxGreen from '@assets/images/product-illustrations/jewel-box--green.svg';
@@ -322,4 +323,5 @@ export {
322323
PlaidCompanyCardDetail,
323324
ReceiptsStackedOnPin,
324325
PaperAirplane,
326+
CardReplacementSuccess,
325327
};

‎src/languages/de.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,6 +329,7 @@ const translations = {
329329
twoFactorCode: 'Zwei-Faktor-Code',
330330
workspaces: 'Arbeitsbereiche',
331331
inbox: 'Posteingang',
332+
success: 'Erfolgreich',
332333
group: 'Gruppe',
333334
profile: 'Profil',
334335
referral: 'Empfehlung',
@@ -6046,7 +6047,6 @@ const translations = {
60466047
},
60476048
},
60486049
reportCardLostOrDamaged: {
6049-
report: 'Verlust / Beschädigung der physischen Karte melden',
60506050
screenTitle: 'Zeugnis verloren oder beschädigt',
60516051
nextButtonLabel: 'Nächste',
60526052
reasonTitle: 'Warum benötigen Sie eine neue Karte?',
@@ -6060,6 +6060,8 @@ const translations = {
60606060
shipNewCardButton: 'Neue Karte versenden',
60616061
addressError: 'Adresse ist erforderlich',
60626062
reasonError: 'Grund ist erforderlich',
6063+
successTitle: 'Ihre neue Karte ist auf dem Weg!',
6064+
successDescription: 'Sie müssen sie aktivieren, sobald sie in wenigen Werktagen ankommt. In der Zwischenzeit ist Ihre virtuelle Karte einsatzbereit.',
60636065
},
60646066
eReceipt: {
60656067
guaranteed: 'Garantierter eReceipt',

‎src/languages/en.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,6 +320,7 @@ const translations = {
320320
twoFactorCode: 'Two-factor code',
321321
workspaces: 'Workspaces',
322322
inbox: 'Inbox',
323+
success: 'Success',
323324
group: 'Group',
324325
profile: 'Profile',
325326
referral: 'Referral',
@@ -5978,7 +5979,6 @@ const translations = {
59785979
},
59795980
},
59805981
reportCardLostOrDamaged: {
5981-
report: 'Report physical card loss / damage',
59825982
screenTitle: 'Report card lost or damaged',
59835983
nextButtonLabel: 'Next',
59845984
reasonTitle: 'Why do you need a new card?',
@@ -5992,6 +5992,8 @@ const translations = {
59925992
shipNewCardButton: 'Ship new card',
59935993
addressError: 'Address is required',
59945994
reasonError: 'Reason is required',
5995+
successTitle: 'Your new card is on the way!',
5996+
successDescription: "You'll need to activate it once it arrives in a few business days. In the meantime, your virtual card is ready to use.",
59955997
},
59965998
eReceipt: {
59975999
guaranteed: 'Guaranteed eReceipt',

‎src/languages/es.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -504,6 +504,7 @@ const translations = {
504504
default: 'Predeterminado',
505505
update: 'Actualizar',
506506
member: 'Miembro',
507+
success: 'Éxito',
507508
auditor: 'Auditor',
508509
role: 'Role',
509510
currency: 'Divisa',
@@ -6496,7 +6497,6 @@ const translations = {
64966497
},
64976498
},
64986499
reportCardLostOrDamaged: {
6499-
report: 'Notificar la pérdida / daño de la tarjeta física',
65006500
screenTitle: 'Notificar la pérdida o deterioro de la tarjeta',
65016501
nextButtonLabel: 'Siguiente',
65026502
reasonTitle: '¿Por qué necesitas una tarjeta nueva?',
@@ -6510,6 +6510,8 @@ const translations = {
65106510
shipNewCardButton: 'Enviar tarjeta nueva',
65116511
addressError: 'La dirección es obligatoria',
65126512
reasonError: 'Se requiere justificación',
6513+
successTitle: '¡Tu nueva tarjeta está en camino!',
6514+
successDescription: 'Tendrás que activarla cuando llegue en unos días hábiles. Mientras tanto, tu tarjeta virtual está lista para usar.',
65136515
},
65146516
eReceipt: {
65156517
guaranteed: 'eRecibo garantizado',

‎src/languages/fr.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,7 @@ const translations = {
328328
magicCode: 'Magic code',
329329
twoFactorCode: 'Code à deux facteurs',
330330
workspaces: 'Espaces de travail',
331+
success: 'Succ\u00E8s',
331332
inbox: 'Boîte de réception',
332333
group: 'Groupe',
333334
profile: 'Profil',
@@ -6054,7 +6055,6 @@ const translations = {
60546055
},
60556056
},
60566057
reportCardLostOrDamaged: {
6057-
report: "Signaler la perte / l'endommagement de la carte physique",
60586058
screenTitle: 'Bulletin perdu ou endommagé',
60596059
nextButtonLabel: 'Suivant',
60606060
reasonTitle: "Pourquoi avez-vous besoin d'une nouvelle carte ?",
@@ -6068,6 +6068,8 @@ const translations = {
60686068
shipNewCardButton: 'Expédier une nouvelle carte',
60696069
addressError: "L'adresse est requise",
60706070
reasonError: 'La raison est requise',
6071+
successTitle: 'Ihre neue Karte ist auf dem Weg!',
6072+
successDescription: 'Sie müssen sie aktivieren, sobald sie in wenigen Werktagen ankommt. In der Zwischenzeit ist Ihre virtuelle Karte einsatzbereit.',
60716073
},
60726074
eReceipt: {
60736075
guaranteed: 'eReçu garanti',

‎src/languages/it.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,6 +329,7 @@ const translations = {
329329
twoFactorCode: 'Codice a due fattori',
330330
workspaces: 'Spazi di lavoro',
331331
inbox: 'Posta in arrivo',
332+
success: 'Successo',
332333
group: 'Gruppo',
333334
profile: 'Profilo',
334335
referral: 'Referenza',
@@ -6032,7 +6033,6 @@ const translations = {
60326033
},
60336034
},
60346035
reportCardLostOrDamaged: {
6035-
report: 'Segnala la perdita / il danneggiamento della carta fisica',
60366036
screenTitle: 'Pagella persa o danneggiata',
60376037
nextButtonLabel: 'Successivo',
60386038
reasonTitle: 'Perché hai bisogno di una nuova carta?',
@@ -6045,6 +6045,8 @@ const translations = {
60456045
deactivateCardButton: 'Disattiva carta',
60466046
shipNewCardButton: 'Spedisci nuova carta',
60476047
addressError: 'Indirizzo richiesto',
6048+
successTitle: 'La tua nuova carta è in arrivo!',
6049+
successDescription: "Dovrai attivarla quando arriverà tra pochi giorni lavorativi. Nel frattempo, la tua carta virtuale è pronta all'uso.",
60486050
reasonError: 'Il motivo è obbligatorio',
60496051
},
60506052
eReceipt: {

‎src/languages/ja.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,7 @@ const translations = {
330330
workspaces: 'ワークスペース',
331331
inbox: '受信トレイ',
332332
group: 'グループ',
333+
success: '成功',
333334
profile: 'プロフィール',
334335
referral: '紹介',
335336
payments: '支払い',
@@ -5975,7 +5976,6 @@ const translations = {
59755976
},
59765977
},
59775978
reportCardLostOrDamaged: {
5978-
report: '物理カードの紛失/破損を報告する',
59795979
screenTitle: '成績表が紛失または損傷しました',
59805980
nextButtonLabel: '次へ',
59815981
reasonTitle: 'なぜ新しいカードが必要なのですか？',
@@ -5989,6 +5989,8 @@ const translations = {
59895989
shipNewCardButton: '新しいカードを発送する',
59905990
addressError: '住所が必要です',
59915991
reasonError: '理由が必要です',
5992+
successTitle: '新しいカードが発送中です！',
5993+
successDescription: '数営業日で届きます。届いたら有効化する必要があります。それまでは仮想カードを使用できます。',
59925994
},
59935995
eReceipt: {
59945996
guaranteed: '保証付きeレシート',

‎src/languages/nl.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,6 +329,7 @@ const translations = {
329329
twoFactorCode: 'Twee-factor code',
330330
workspaces: 'Werkruimtes',
331331
inbox: 'Inbox',
332+
success: 'Succes',
332333
group: 'Groep',
333334
profile: 'Profiel',
334335
referral: 'Verwijzing',
@@ -6018,7 +6019,6 @@ const translations = {
60186019
},
60196020
},
60206021
reportCardLostOrDamaged: {
6021-
report: 'Rapporteer verlies / schade van fysieke kaart',
60226022
screenTitle: 'Rapportkaart verloren of beschadigd',
60236023
nextButtonLabel: 'Volgende',
60246024
reasonTitle: 'Waarom heb je een nieuwe kaart nodig?',
@@ -6032,6 +6032,8 @@ const translations = {
60326032
shipNewCardButton: 'Verzend nieuwe kaart',
60336033
addressError: 'Adres is vereist',
60346034
reasonError: 'Reden is vereist',
6035+
successTitle: 'Uw nieuwe kaart is onderweg!',
6036+
successDescription: 'U moet deze activeren zodra deze over een paar werkdagen aankomt. In de tussentijd kunt u uw virtuele kaart gebruiken.',
60356037
},
60366038
eReceipt: {
60376039
guaranteed: 'Gegarandeerd eReceipt',

0 commit comments

Comments
 (0)