From b086a78466431a26a2d5779cffbb17f77968c82a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Sep 2023 14:29:31 +0200 Subject: [PATCH 01/64] create ReportCardLostPage, add it to navigator --- src/ROUTES.ts | 1 + .../AppNavigator/ModalStackNavigators.js | 1 + src/libs/Navigation/linkingConfig.js | 4 +++ .../settings/Wallet/ReportCardLostPage.js | 26 +++++++++++++++++++ 4 files changed, 32 insertions(+) create mode 100644 src/pages/settings/Wallet/ReportCardLostPage.js diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 78d5f4d54888..5ccbc9957af1 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -81,6 +81,7 @@ export default { SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments', SETTINGS_WALLET_TRANSFER_BALANCE: 'settings/wallet/transfer-balance', SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT: 'settings/wallet/choose-transfer-account', + SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED: 'settings/wallet/report-card-lost-or-damaged', SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details', SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name', SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: 'settings/profile/personal-details/date-of-birth', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index fc284f566c80..f1cc26e12550 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -162,6 +162,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({ ReimbursementAccount: () => require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default, GetAssistance: () => require('../../../pages/GetAssistancePage').default, Settings_TwoFactorAuth: () => require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default, + Settings_ReportCardLostOrDamaged: () => require('../../../pages/settings/Wallet/ReportCardLostPage').default, }); const EnablePaymentsStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 116e1b9d55a5..908a7817e415 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -85,6 +85,10 @@ export default { path: ROUTES.SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT, exact: true, }, + Settings_ReportCardLostOrDamaged: { + path: ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED, + exact: true, + }, Settings_Add_Debit_Card: { path: ROUTES.SETTINGS_ADD_DEBIT_CARD, exact: true, diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js new file mode 100644 index 000000000000..caafa2991b0e --- /dev/null +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -0,0 +1,26 @@ +import React from 'react'; +import {Text} from 'react-native'; +import ScreenWrapper from '../../../components/ScreenWrapper'; +import Navigation from '../../../libs/Navigation/Navigation'; +import ROUTES from '../../../ROUTES'; +import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; +import styles from '../../../styles/styles'; + +function ReportCardLostPage() { + return ( + + Navigation.goBack(ROUTES.SETTINGS_WALLET)} + /> + + Why do you need a new card? + + + ); +} + +export default ReportCardLostPage; From c05c66a35939901bc34cde9966fffc28205f61c2 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Sep 2023 17:02:46 +0200 Subject: [PATCH 02/64] add form to onyxkeys --- src/ONYXKEYS.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 6649a33fe15e..b233b9d24f2d 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -291,6 +291,7 @@ const ONYXKEYS = { PRIVATE_NOTES_FORM: 'privateNotesForm', I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm', INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm', + REPORT_PHYSICAL_CARD_LOST: 'reportPhysicalCardLostForm', }, } as const; From 74a9ee40177dc9e981a311be5e1526bd6be5b7dd Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 6 Sep 2023 17:03:23 +0200 Subject: [PATCH 03/64] start working on SingleOptionSelector --- src/components/SingleOptionSelector.js | 52 ++++++++++++++++++++++++++ src/styles/styles.js | 7 ++++ 2 files changed, 59 insertions(+) create mode 100644 src/components/SingleOptionSelector.js diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js new file mode 100644 index 000000000000..4adfd5276802 --- /dev/null +++ b/src/components/SingleOptionSelector.js @@ -0,0 +1,52 @@ +import React from 'react'; +import {Text} from 'react-native'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import SelectCircle from './SelectCircle'; +import styles from '../styles/styles'; +import PressableWithFeedback from './Pressable/PressableWithFeedback'; +import CONST from '../CONST'; + +const propTypes = { + options: PropTypes.arrayOf( + PropTypes.shape({ + key: PropTypes.string, + label: PropTypes.string, + }), + ), + selectedOptionKey: PropTypes.string, + onSelectOption: PropTypes.func, +}; + +const defaultProps = { + options: [], + selectedOptionKey: '', + onSelectOption: () => {}, +}; + +function SingleOptionSelector({options, selectedOptionKey, onSelectOption}) { + return ( + <> + {_.map(options, (option) => ( + onSelectOption(option)} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} + accessibilityState={{checked: selectedOptionKey === option.key}} + aria-checked={selectedOptionKey === option.key} + accessibilityLabel={option.label} + > + + {option.label} + + ))} + + ); +} + +SingleOptionSelector.propTypes = propTypes; +SingleOptionSelector.defaultProps = defaultProps; +SingleOptionSelector.displayName = 'SingleOptionSelector'; + +export default SingleOptionSelector; diff --git a/src/styles/styles.js b/src/styles/styles.js index 8e90af0f027c..d67f5f43f207 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3678,6 +3678,13 @@ const styles = (theme) => ({ width: '100%', }, + singleOptionSelectorRow: { + ...flex.flexRow, + ...flex.alignItemsCenter, + gap: 12, + marginBottom: 16, + }, + walletCard: { borderRadius: variables.componentBorderRadiusLarge, position: 'relative', From a7c79674ea20d8fc36db99d8f79b4f2c03fbb56c Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Sep 2023 10:17:45 +0200 Subject: [PATCH 04/64] improve SingleOptionSelector style --- src/components/SingleOptionSelector.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js index 4adfd5276802..2222a00911db 100644 --- a/src/components/SingleOptionSelector.js +++ b/src/components/SingleOptionSelector.js @@ -1,11 +1,12 @@ import React from 'react'; -import {Text} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; +import {View} from 'react-native'; import SelectCircle from './SelectCircle'; import styles from '../styles/styles'; -import PressableWithFeedback from './Pressable/PressableWithFeedback'; import CONST from '../CONST'; +import Text from './Text'; +import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; const propTypes = { options: PropTypes.arrayOf( @@ -26,9 +27,9 @@ const defaultProps = { function SingleOptionSelector({options, selectedOptionKey, onSelectOption}) { return ( - <> + {_.map(options, (option) => ( - onSelectOption(option)} @@ -39,9 +40,9 @@ function SingleOptionSelector({options, selectedOptionKey, onSelectOption}) { > {option.label} - + ))} - + ); } From 4eb41103e89671c453ac1b1d447932e9e615672b Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Sep 2023 10:44:41 +0200 Subject: [PATCH 05/64] add translations --- src/languages/en.ts | 20 ++++++++++++++++++-- src/languages/es.ts | 21 +++++++++++++++++++-- 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 43d93e093d69..6f5aa8292bfc 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -72,7 +72,6 @@ import type { FormattedMaxLengthParams, RequestedAmountMessageParams, TagSelectionParams, - TranslationBase, } from './types'; import * as ReportActionsUtils from '../libs/ReportActionsUtils'; @@ -1785,4 +1784,21 @@ export default { selectSuggestedAddress: 'Please select a suggested address', }, }, -} satisfies TranslationBase; + demos: { + saastr: { + signInWelcome: 'Welcome to SaaStr! Hop in to start networking now.', + heroBody: 'Use New Expensify for event updates, networking, social chatter, and to get paid back for lunch!', + }, + sbe: { + signInWelcome: 'Welcome to Small Business Expo! Get paid back for your ride.', + heroBody: 'Use New Expensify for event updates, networking, social chatter, and to get paid back for your ride to or from the show!', + }, + }, + reportCardLostOrDamaged: { + screenTitle: 'Report card lost or damaged', + nextButtonLabel: 'Next', + title: 'Why do you need a new card?', + cardDamaged: 'My card was damaged', + cardLostOrStolen: 'My card was lost or stolen', + }, +} as const; diff --git a/src/languages/es.ts b/src/languages/es.ts index 582134c32896..4461989f125d 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -72,7 +72,6 @@ import type { FormattedMaxLengthParams, RequestedAmountMessageParams, TagSelectionParams, - EnglishTranslation, } from './types'; /* eslint-disable max-len */ @@ -2268,4 +2267,22 @@ export default { selectSuggestedAddress: 'Por favor, selecciona una dirección sugerida', }, }, -} satisfies EnglishTranslation; + demos: { + saastr: { + signInWelcome: '¡Bienvenido a SaaStr! Entra y empieza a establecer contactos.', + heroBody: 'Utiliza New Expensify para estar al día de los eventos, establecer contactos, charlar en las redes sociales, ¡y para que te devuelvan el dinero de la comida!', + }, + sbe: { + signInWelcome: '¡Bienvenido a Small Business Expo! Recupera el dinero de tu viaje.', + heroBody: + 'Utiliza New Expensify para estar al día de los eventos, establecer contactos, charlar en las redes sociales y para que te paguen el viaje de ida y vuelta a la conferencia.', + }, + }, + reportCardLostOrDamaged: { + screenTitle: 'Report card lost or damaged', + nextButtonLabel: 'Next', + title: 'Why do you need a new card?', + cardDamaged: 'My card was damaged', + cardLostOrStolen: 'My card was lost or stolen', + }, +}; From 2667b60b7c5423bb07082ecd1bbfdfbebeaf06ec Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Sep 2023 10:45:00 +0200 Subject: [PATCH 06/64] translate SingleOptionSelectors options --- src/components/SingleOptionSelector.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js index 2222a00911db..4903a951a00e 100644 --- a/src/components/SingleOptionSelector.js +++ b/src/components/SingleOptionSelector.js @@ -7,6 +7,7 @@ import styles from '../styles/styles'; import CONST from '../CONST'; import Text from './Text'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; const propTypes = { options: PropTypes.arrayOf( @@ -17,6 +18,7 @@ const propTypes = { ), selectedOptionKey: PropTypes.string, onSelectOption: PropTypes.func, + ...withLocalizePropTypes, }; const defaultProps = { @@ -25,7 +27,7 @@ const defaultProps = { onSelectOption: () => {}, }; -function SingleOptionSelector({options, selectedOptionKey, onSelectOption}) { +function SingleOptionSelector({options, selectedOptionKey, onSelectOption, translate}) { return ( {_.map(options, (option) => ( @@ -39,7 +41,7 @@ function SingleOptionSelector({options, selectedOptionKey, onSelectOption}) { accessibilityLabel={option.label} > - {option.label} + {translate(option.label)} ))} @@ -50,4 +52,4 @@ SingleOptionSelector.propTypes = propTypes; SingleOptionSelector.defaultProps = defaultProps; SingleOptionSelector.displayName = 'SingleOptionSelector'; -export default SingleOptionSelector; +export default withLocalize(SingleOptionSelector); From e028b03bb819047db7eff0898e9867ff40f6dcbf Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 13 Sep 2023 11:41:41 +0200 Subject: [PATCH 07/64] add missing translations --- src/languages/en.ts | 5 ++++- src/languages/es.ts | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 6f5aa8292bfc..d94021043198 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1797,8 +1797,11 @@ export default { reportCardLostOrDamaged: { screenTitle: 'Report card lost or damaged', nextButtonLabel: 'Next', - title: 'Why do you need a new card?', + reasonTitle: 'Why do you need a new card?', 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.', + address: 'Address', }, } as const; diff --git a/src/languages/es.ts b/src/languages/es.ts index 4461989f125d..5b25db6ff35b 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2281,8 +2281,11 @@ export default { reportCardLostOrDamaged: { screenTitle: 'Report card lost or damaged', nextButtonLabel: 'Next', - title: 'Why do you need a new card?', + reasonTitle: 'Why do you need a new card?', 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.', + address: 'Address', }, }; From 08ec6c24f78d0f158918e85134f562dce1e3f848 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 13 Sep 2023 12:27:00 +0200 Subject: [PATCH 08/64] add missing components to ReportCardLostPage --- .../settings/Wallet/ReportCardLostPage.js | 145 ++++++++++++++++-- 1 file changed, 135 insertions(+), 10 deletions(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index caafa2991b0e..2b9dc5ed723b 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -1,26 +1,151 @@ -import React from 'react'; -import {Text} from 'react-native'; +import React, {useState} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import PropTypes from 'prop-types'; import ScreenWrapper from '../../../components/ScreenWrapper'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import styles from '../../../styles/styles'; +import Form from '../../../components/Form'; +import ONYXKEYS from '../../../ONYXKEYS'; +import SingleOptionSelector from '../../../components/SingleOptionSelector'; +import useLocalize from '../../../hooks/useLocalize'; +import Text from '../../../components/Text'; +import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription'; + +const OPTIONS = [ + { + key: 'damaged', + label: 'reportCardLostOrDamaged.cardDamaged', + }, + { + key: 'lost_or_stolen', + label: 'reportCardLostOrDamaged.cardLostOrStolen', + }, +]; + +const propTypes = { + /** User's private personal details */ + privatePersonalDetails: PropTypes.shape({ + /** User's home address */ + address: PropTypes.shape({ + street: PropTypes.string, + city: PropTypes.string, + state: PropTypes.string, + zip: PropTypes.string, + country: PropTypes.string, + }), + }), +}; + +const defaultProps = { + privatePersonalDetails: { + address: { + street: '', + street2: '', + city: '', + state: '', + zip: '', + country: '', + }, + }, +}; + +function ReportCardLostPage({privatePersonalDetails}) { + const privateDetails = privatePersonalDetails || {}; + const address = privateDetails.address || {}; + + const {translate} = useLocalize(); + + const [reason, setReason] = useState(OPTIONS[0]); + const [isReasonConfirmed, setIsReasonConfirmed] = useState(false); + + const validate = (values) => { + if (!isReasonConfirmed) { + return {}; + } + + return {}; + }; + + const onSubmit = () => { + console.log('SUBMIT'); + setIsReasonConfirmed(true); + }; + + const handleOptionSelect = (option) => { + setReason(option); + }; + + /** + * Applies common formatting to each piece of an address + * + * @param {String} piece + * @returns {String} + */ + const formatPiece = (piece) => (piece ? `${piece}, ` : ''); + + /** + * Formats an address object into an easily readable string + * + * @returns {String} + */ + const getFormattedAddress = () => { + const [street1, street2] = (address.street || '').split('\n'); + const formattedAddress = + formatPiece(street1) + formatPiece(street2) + formatPiece(address.city) + formatPiece(address.state) + formatPiece(address.zip) + formatPiece(address.country); + + // Remove the last comma of the address + return formattedAddress.trim().replace(/,$/, ''); + }; -function ReportCardLostPage() { return ( Navigation.goBack(ROUTES.SETTINGS_WALLET)} /> - - Why do you need a new card? - + {isReasonConfirmed ? ( + <> + {translate('reportCardLostOrDamaged.confirmAddressTitle')} + Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} + style={[styles.popoverMenuItem, {paddingHorizontal: 0}]} + numberOfLinesTitle={2} + /> + {translate('reportCardLostOrDamaged.currentCardInfo')} + + ) : ( + <> + {translate('reportCardLostOrDamaged.reasonTitle')} + + + )} + ); } -export default ReportCardLostPage; +ReportCardLostPage.propTypes = propTypes; +ReportCardLostPage.defaultProps = defaultProps; +ReportCardLostPage.displayName = 'ReportCardLostPage'; + +export default withOnyx({ + privatePersonalDetails: { + key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, + }, +})(ReportCardLostPage); From 8924ee2c6107fa41fa267ad8a0121ceb8b3d67d2 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 13 Sep 2023 14:20:20 +0200 Subject: [PATCH 09/64] reorganize styles in ReportCardLostPage --- src/pages/settings/Wallet/ReportCardLostPage.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 2b9dc5ed723b..55bb7753218e 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -1,6 +1,7 @@ import React, {useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; +import { View } from 'react-native'; import ScreenWrapper from '../../../components/ScreenWrapper'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; @@ -69,7 +70,6 @@ function ReportCardLostPage({privatePersonalDetails}) { }; const onSubmit = () => { - console.log('SUBMIT'); setIsReasonConfirmed(true); }; @@ -110,30 +110,31 @@ function ReportCardLostPage({privatePersonalDetails}) { validate={validate} onSubmit={onSubmit} submitButtonText={translate('reportCardLostOrDamaged.nextButtonLabel')} - style={[styles.mh5, styles.flexGrow1]} + // style={[styles.mh5, styles.flexGrow1]} + style={styles.flexGrow1} > {isReasonConfirmed ? ( <> - {translate('reportCardLostOrDamaged.confirmAddressTitle')} + {translate('reportCardLostOrDamaged.confirmAddressTitle')} Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} - style={[styles.popoverMenuItem, {paddingHorizontal: 0}]} + // style={[styles.popoverMenuItem, {paddingHorizontal: 0}]} numberOfLinesTitle={2} /> - {translate('reportCardLostOrDamaged.currentCardInfo')} + {translate('reportCardLostOrDamaged.currentCardInfo')} ) : ( - <> + {translate('reportCardLostOrDamaged.reasonTitle')} - + )} From 3b2258ff16a524e6d473b7d80b51dbab160c867c Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 13 Sep 2023 14:25:54 +0200 Subject: [PATCH 10/64] add missing translations --- src/languages/en.ts | 1 + src/languages/es.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/languages/en.ts b/src/languages/en.ts index d94021043198..7b67e4bc7eca 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1803,5 +1803,6 @@ export default { 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.', address: 'Address', + deactivateCardButton: 'Deactivate card', }, } as const; diff --git a/src/languages/es.ts b/src/languages/es.ts index 5b25db6ff35b..c34402499b72 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2287,5 +2287,6 @@ export default { 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.', address: 'Address', + deactivateCardButton: 'Deactivate card', }, }; From ed38f87eb5a78371de0e6a4fbf5c7bdfce0f2772 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 13 Sep 2023 14:29:30 +0200 Subject: [PATCH 11/64] fetch personal details in ReportCardLostPage --- src/pages/settings/Wallet/ReportCardLostPage.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 55bb7753218e..34312416be17 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -1,7 +1,7 @@ import React, {useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import { View } from 'react-native'; +import {View} from 'react-native'; import ScreenWrapper from '../../../components/ScreenWrapper'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; @@ -13,6 +13,7 @@ import SingleOptionSelector from '../../../components/SingleOptionSelector'; import useLocalize from '../../../hooks/useLocalize'; import Text from '../../../components/Text'; import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription'; +import usePrivatePersonalDetails from '../../../hooks/usePrivatePersonalDetails'; const OPTIONS = [ { @@ -53,6 +54,8 @@ const defaultProps = { }; function ReportCardLostPage({privatePersonalDetails}) { + usePrivatePersonalDetails(); + const privateDetails = privatePersonalDetails || {}; const address = privateDetails.address || {}; @@ -109,8 +112,7 @@ function ReportCardLostPage({privatePersonalDetails}) { formID={ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_LOST} validate={validate} onSubmit={onSubmit} - submitButtonText={translate('reportCardLostOrDamaged.nextButtonLabel')} - // style={[styles.mh5, styles.flexGrow1]} + submitButtonText={isReasonConfirmed ? translate('reportCardLostOrDamaged.deactivateCardButton') : translate('reportCardLostOrDamaged.nextButtonLabel')} style={styles.flexGrow1} > {isReasonConfirmed ? ( @@ -121,7 +123,6 @@ function ReportCardLostPage({privatePersonalDetails}) { description={translate('reportCardLostOrDamaged.address')} shouldShowRightIcon onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} - // style={[styles.popoverMenuItem, {paddingHorizontal: 0}]} numberOfLinesTitle={2} /> {translate('reportCardLostOrDamaged.currentCardInfo')} From 1cbee354270a965cc4944f1b49c411a3003b733f Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 13 Sep 2023 15:11:25 +0200 Subject: [PATCH 12/64] add button style prop to forms --- src/components/Form.js | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index ef6c3ea10474..962271bea9c0 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -82,6 +82,9 @@ const propTypes = { /** Information about the network */ network: networkPropTypes.isRequired, + /** Custom styles for submit button */ + submitButtonStyle: stylePropTypes, + ...withLocalizePropTypes, }; @@ -99,6 +102,7 @@ const defaultProps = { footerContent: null, style: [], validate: () => ({}), + submitButtonStyle: {}, }; function Form(props) { @@ -450,28 +454,28 @@ function Form(props) { containerStyles={[styles.mh0, styles.mt5, styles.flex1]} enabledWhenOffline={props.enabledWhenOffline} isSubmitActionDangerous={props.isSubmitActionDangerous} - disablePressOnEnter + disablePressOnEnters + submitButtonStyle={props.submitButtonStyle} /> )} ), [ - childrenWrapperWithProps, - errors, - formContentRef, - formRef, - errorMessage, - inputRefs, - inputValues, - submit, props.style, - children, - props.formState, + props.isSubmitButtonVisible, + props.submitButtonText, + props.formState.errorFields, + props.formState.isLoading, props.footerContent, props.enabledWhenOffline, props.isSubmitActionDangerous, - props.isSubmitButtonVisible, - props.submitButtonText, + props.submitButtonStyle, + submit, + childrenWrapperWithProps, + children, + inputValues, + errors, + errorMessage, ], ); From 4b061e23ab290269594a3c23e488dd3f5460427b Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 13 Sep 2023 15:12:00 +0200 Subject: [PATCH 13/64] improve button style --- src/pages/settings/Wallet/ReportCardLostPage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 34312416be17..f5e63ce44d64 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -114,6 +114,7 @@ function ReportCardLostPage({privatePersonalDetails}) { onSubmit={onSubmit} submitButtonText={isReasonConfirmed ? translate('reportCardLostOrDamaged.deactivateCardButton') : translate('reportCardLostOrDamaged.nextButtonLabel')} style={styles.flexGrow1} + submitButtonStyle={styles.ph5} > {isReasonConfirmed ? ( <> From fc32988eb0d730cc93a18c5ebf51d06c7b612eb3 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 13 Sep 2023 16:04:20 +0200 Subject: [PATCH 14/64] add comments --- src/components/SingleOptionSelector.js | 5 +++++ src/pages/settings/Wallet/ReportCardLostPage.js | 1 + 2 files changed, 6 insertions(+) diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js index 4903a951a00e..180640290c25 100644 --- a/src/components/SingleOptionSelector.js +++ b/src/components/SingleOptionSelector.js @@ -10,13 +10,18 @@ import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; const propTypes = { + /** Array of options for the selector, key is a unique identifier, label is a localize key that will be translated and displayed */ options: PropTypes.arrayOf( PropTypes.shape({ key: PropTypes.string, label: PropTypes.string, }), ), + + /** Key of the option that is currently selected */ selectedOptionKey: PropTypes.string, + + /** Function to be called when an option is selected */ onSelectOption: PropTypes.func, ...withLocalizePropTypes, }; diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index f5e63ce44d64..049641930e71 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -15,6 +15,7 @@ import Text from '../../../components/Text'; import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription'; import usePrivatePersonalDetails from '../../../hooks/usePrivatePersonalDetails'; +/** Options for reason selector */ const OPTIONS = [ { key: 'damaged', From a3df9af7588df6fb1f377b42d7c8c82e287fac20 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 14 Sep 2023 09:12:40 +0200 Subject: [PATCH 15/64] update translations --- src/languages/en.ts | 1 + src/languages/es.ts | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 7b67e4bc7eca..7bcc65073826 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1795,6 +1795,7 @@ export default { }, }, reportCardLostOrDamaged: { + report: 'Report physical card loss / damage', screenTitle: 'Report card lost or damaged', nextButtonLabel: 'Next', reasonTitle: 'Why do you need a new card?', diff --git a/src/languages/es.ts b/src/languages/es.ts index c34402499b72..ec19cd5af8bb 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2279,14 +2279,15 @@ export default { }, }, reportCardLostOrDamaged: { - screenTitle: 'Report card lost or damaged', - nextButtonLabel: 'Next', - reasonTitle: 'Why do you need a new card?', - 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.', - address: 'Address', - deactivateCardButton: 'Deactivate card', + report: 'Notificar la pérdida / daño de la tarjeta física', + screenTitle: 'Notificar la pérdida o deterioro de la tarjeta', + nextButtonLabel: 'Siguiente', + reasonTitle: '¿Por qué necesita una tarjeta nueva?', + cardDamaged: 'Mi tarjeta estaba dañada', + cardLostOrStolen: 'He perdido o me han robado la tarjeta', + confirmAddressTitle: 'Confirme que la dirección que aparece a continuación es a la que desea que le enviemos su nueva tarjeta.', + currentCardInfo: 'Su tarjeta actual se desactivará permanentemente en cuanto se realice el pedido. La mayoría de las tarjetas llegan en pocos días laborables.', + address: 'Dirección', + deactivateCardButton: 'Desactivar tarjeta', }, }; From c41a995bbaa00e16c2b5ae08343d39c8e1c9ff6d Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 14 Sep 2023 09:31:22 +0200 Subject: [PATCH 16/64] add spanish translations --- src/languages/es.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/languages/es.ts b/src/languages/es.ts index ec19cd5af8bb..2290c24e658a 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2282,11 +2282,11 @@ export default { report: 'Notificar la pérdida / daño de la tarjeta física', screenTitle: 'Notificar la pérdida o deterioro de la tarjeta', nextButtonLabel: 'Siguiente', - reasonTitle: '¿Por qué necesita una tarjeta nueva?', - cardDamaged: 'Mi tarjeta estaba dañada', + reasonTitle: '¿Por qué necesitas una tarjeta nueva?', + cardDamaged: 'Mi tarjeta está dañada', cardLostOrStolen: 'He perdido o me han robado la tarjeta', - confirmAddressTitle: 'Confirme que la dirección que aparece a continuación es a la que desea que le enviemos su nueva tarjeta.', - currentCardInfo: 'Su tarjeta actual se desactivará permanentemente en cuanto se realice el pedido. La mayoría de las tarjetas llegan en pocos días laborables.', + 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.', address: 'Dirección', deactivateCardButton: 'Desactivar tarjeta', }, From 28fe506158325fe834e1833fa659231fe708df59 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 14 Sep 2023 10:11:38 +0200 Subject: [PATCH 17/64] adjust forms to use the latest props --- src/components/Form.js | 8 ++++---- src/pages/settings/Wallet/ReportCardLostPage.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index 962271bea9c0..a243443af8f1 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -83,7 +83,7 @@ const propTypes = { network: networkPropTypes.isRequired, /** Custom styles for submit button */ - submitButtonStyle: stylePropTypes, + buttonStyles: stylePropTypes, ...withLocalizePropTypes, }; @@ -102,7 +102,7 @@ const defaultProps = { footerContent: null, style: [], validate: () => ({}), - submitButtonStyle: {}, + buttonStyles: [], }; function Form(props) { @@ -455,7 +455,7 @@ function Form(props) { enabledWhenOffline={props.enabledWhenOffline} isSubmitActionDangerous={props.isSubmitActionDangerous} disablePressOnEnters - submitButtonStyle={props.submitButtonStyle} + buttonStyles={props.buttonStyles} /> )} @@ -469,7 +469,7 @@ function Form(props) { props.footerContent, props.enabledWhenOffline, props.isSubmitActionDangerous, - props.submitButtonStyle, + props.buttonStyles, submit, childrenWrapperWithProps, children, diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 049641930e71..4f4af2ba27f0 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -115,7 +115,7 @@ function ReportCardLostPage({privatePersonalDetails}) { onSubmit={onSubmit} submitButtonText={isReasonConfirmed ? translate('reportCardLostOrDamaged.deactivateCardButton') : translate('reportCardLostOrDamaged.nextButtonLabel')} style={styles.flexGrow1} - submitButtonStyle={styles.ph5} + buttonStyles={[styles.ph5]} > {isReasonConfirmed ? ( <> From f7d33df81852366908ed1782c005933f348b7e19 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 19 Sep 2023 16:04:21 +0200 Subject: [PATCH 18/64] add new form to ONYXKEYS --- src/ONYXKEYS.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index b233b9d24f2d..ee1575e1b5c2 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -422,6 +422,7 @@ type OnyxValues = { [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_AFTER_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM]: OnyxTypes.Form; + [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_LOST]: OnyxTypes.Form; }; export default ONYXKEYS; From d93c5c92703ad6cf1919bf9927a1db4687720573 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 20 Sep 2023 08:44:12 +0200 Subject: [PATCH 19/64] start implementing card settings api methods --- src/libs/actions/CardSettings.js | 51 ++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/libs/actions/CardSettings.js diff --git a/src/libs/actions/CardSettings.js b/src/libs/actions/CardSettings.js new file mode 100644 index 000000000000..c8f35cb747cb --- /dev/null +++ b/src/libs/actions/CardSettings.js @@ -0,0 +1,51 @@ +import Onyx from 'react-native-onyx'; +import ONYXKEYS from '../../ONYXKEYS'; +import * as API from '../API'; + +function getUpdatedCardsList(cardsList) { + return cardsList; +} + +/** + * Call the API to deactivate the card and request a new one + * @param {String} cardId - id of the card that is going to be replaced + * @param {String} reason - reason for replacement ('damaged' | 'stolen') + */ +function requestReplacementExpensifyCard(cardId, reason) { + const optimisticData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.CARD_LIST, + value: {}, + }, + ]; + const successData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.CARD_LIST, + value: {}, + }, + ]; + const failureData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.CARD_LIST, + value: {}, + }, + ]; + + API.write( + 'RequestReplacementExpensifyCard', + { + cardId, + reason, + }, + { + optimisticData, + successData, + failureData, + }, + ); +} + +export {requestReplacementExpensifyCard, getUpdatedCardsList}; From 081f345a86695679b75765c0d26ef2975b2417a8 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 20 Sep 2023 08:45:08 +0200 Subject: [PATCH 20/64] add validation logic to report form --- .../settings/Wallet/ReportCardLostPage.js | 59 +++++++++++-------- 1 file changed, 36 insertions(+), 23 deletions(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 4f4af2ba27f0..918c842937cc 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useMemo, useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import {View} from 'react-native'; @@ -22,7 +22,7 @@ const OPTIONS = [ label: 'reportCardLostOrDamaged.cardDamaged', }, { - key: 'lost_or_stolen', + key: 'stolen', label: 'reportCardLostOrDamaged.cardLostOrStolen', }, ]; @@ -64,22 +64,7 @@ function ReportCardLostPage({privatePersonalDetails}) { const [reason, setReason] = useState(OPTIONS[0]); const [isReasonConfirmed, setIsReasonConfirmed] = useState(false); - - const validate = (values) => { - if (!isReasonConfirmed) { - return {}; - } - - return {}; - }; - - const onSubmit = () => { - setIsReasonConfirmed(true); - }; - - const handleOptionSelect = (option) => { - setReason(option); - }; + const [shouldShowAddressError, setShouldShowAddressError] = useState(false); /** * Applies common formatting to each piece of an address @@ -94,13 +79,39 @@ function ReportCardLostPage({privatePersonalDetails}) { * * @returns {String} */ - const getFormattedAddress = () => { + const formattedAddress = useMemo(() => { const [street1, street2] = (address.street || '').split('\n'); - const formattedAddress = - formatPiece(street1) + formatPiece(street2) + formatPiece(address.city) + formatPiece(address.state) + formatPiece(address.zip) + formatPiece(address.country); + const formatted = formatPiece(street1) + formatPiece(street2) + formatPiece(address.city) + formatPiece(address.state) + formatPiece(address.zip) + formatPiece(address.country); // Remove the last comma of the address - return formattedAddress.trim().replace(/,$/, ''); + return formatted.trim().replace(/,$/, ''); + }, [address.city, address.country, address.state, address.street, address.zip]); + + const validate = () => { + if (!isReasonConfirmed) { + setShouldShowAddressError(false); + return {}; + } + + if (!formattedAddress) { + setShouldShowAddressError(true); + return {}; + } + }; + + const onSubmit = () => { + if (!isReasonConfirmed) { + setIsReasonConfirmed(true); + return; + } + + if (!formattedAddress) { + // TODO: submit + } + }; + + const handleOptionSelect = (option) => { + setReason(option); }; return ( @@ -121,12 +132,14 @@ function ReportCardLostPage({privatePersonalDetails}) { <> {translate('reportCardLostOrDamaged.confirmAddressTitle')} Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} numberOfLinesTitle={2} /> + {shouldShowAddressError && Address missing} {translate('reportCardLostOrDamaged.currentCardInfo')} ) : ( From 10857757f7a90e9d78e66f4d9c9e48f33c6ee953 Mon Sep 17 00:00:00 2001 From: Ana Margarida Silva Date: Thu, 21 Sep 2023 14:35:18 +0100 Subject: [PATCH 21/64] feat: pass tag list name to the modified expense message --- src/libs/ReportUtils.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 7fc151ce6f26..b2fd4d38dda6 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1614,7 +1614,12 @@ function getModifiedExpenseMessage(reportAction) { const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag'); if (hasModifiedTag) { - return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.tag, reportActionOriginalMessage.oldTag, Localize.translateLocal('common.tag'), true); + return getProperSchemaForModifiedExpenseMessage( + reportActionOriginalMessage.tag, + reportActionOriginalMessage.oldTag, + reportActionOriginalMessage.tagListName || Localize.translateLocal('common.tag'), + true, + ); } const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable'); @@ -1669,6 +1674,7 @@ function getModifiedExpenseOriginalMessage(oldTransaction, transactionChanges, i if (_.has(transactionChanges, 'tag')) { originalMessage.oldTag = TransactionUtils.getTag(oldTransaction); originalMessage.tag = transactionChanges.tag; + originalMessage.tagListName = transactionChanges.tagListName; } if (_.has(transactionChanges, 'billable')) { From 3be55da8a9a0b2510163a5f4cb8af1b4a0f2d2d9 Mon Sep 17 00:00:00 2001 From: Ana Margarida Silva Date: Mon, 25 Sep 2023 09:52:23 +0100 Subject: [PATCH 22/64] fix: small review fixes --- src/libs/ReportUtils.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index b2fd4d38dda6..7fc151ce6f26 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1614,12 +1614,7 @@ function getModifiedExpenseMessage(reportAction) { const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag'); if (hasModifiedTag) { - return getProperSchemaForModifiedExpenseMessage( - reportActionOriginalMessage.tag, - reportActionOriginalMessage.oldTag, - reportActionOriginalMessage.tagListName || Localize.translateLocal('common.tag'), - true, - ); + return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.tag, reportActionOriginalMessage.oldTag, Localize.translateLocal('common.tag'), true); } const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable'); @@ -1674,7 +1669,6 @@ function getModifiedExpenseOriginalMessage(oldTransaction, transactionChanges, i if (_.has(transactionChanges, 'tag')) { originalMessage.oldTag = TransactionUtils.getTag(oldTransaction); originalMessage.tag = transactionChanges.tag; - originalMessage.tagListName = transactionChanges.tagListName; } if (_.has(transactionChanges, 'billable')) { From 66929c1022c375286885e8258fc73ce3c9c52a71 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 25 Sep 2023 16:20:49 +0200 Subject: [PATCH 23/64] revert Accessibility change --- .github/ISSUE_TEMPLATE/Accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE/Accessibility.md b/.github/ISSUE_TEMPLATE/Accessibility.md index 1323e2c17e78..36a64aa25b43 100644 --- a/.github/ISSUE_TEMPLATE/Accessibility.md +++ b/.github/ISSUE_TEMPLATE/Accessibility.md @@ -34,7 +34,7 @@ What can we do to fix the issue? -Which of our officially supported platforms is this issue occurring on? Please only tick the box if you have provided a screen-recording in the thread for each platform: +Which of our officially supported platforms is this issue occurring on? - [ ] Android / native - [ ] Android / Chrome - [ ] iOS / native From f3a1a0631f77be3a4139802e54f0bab4555aa4f1 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 27 Sep 2023 13:51:14 +0200 Subject: [PATCH 24/64] revert Accessibility.md changes --- .github/ISSUE_TEMPLATE/Accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE/Accessibility.md b/.github/ISSUE_TEMPLATE/Accessibility.md index 36a64aa25b43..1323e2c17e78 100644 --- a/.github/ISSUE_TEMPLATE/Accessibility.md +++ b/.github/ISSUE_TEMPLATE/Accessibility.md @@ -34,7 +34,7 @@ What can we do to fix the issue? -Which of our officially supported platforms is this issue occurring on? +Which of our officially supported platforms is this issue occurring on? Please only tick the box if you have provided a screen-recording in the thread for each platform: - [ ] Android / native - [ ] Android / Chrome - [ ] iOS / native From 96bc3388bb2e27f8c80abfb607c7165aee965c5d Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 27 Sep 2023 14:22:22 +0200 Subject: [PATCH 25/64] revert Form.js changes --- src/components/Form.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index a243443af8f1..716bd2d86d0f 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -454,28 +454,29 @@ function Form(props) { containerStyles={[styles.mh0, styles.mt5, styles.flex1]} enabledWhenOffline={props.enabledWhenOffline} isSubmitActionDangerous={props.isSubmitActionDangerous} - disablePressOnEnters + disablePressOnEnter buttonStyles={props.buttonStyles} /> )} ), [ + childrenWrapperWithProps, + errors, + formContentRef, + formRef, + errorMessage, + inputRefs, + inputValues, + submit, props.style, - props.isSubmitButtonVisible, - props.submitButtonText, - props.formState.errorFields, - props.formState.isLoading, + children, + props.formState, props.footerContent, props.enabledWhenOffline, props.isSubmitActionDangerous, - props.buttonStyles, - submit, - childrenWrapperWithProps, - children, - inputValues, - errors, - errorMessage, + props.isSubmitButtonVisible, + props.submitButtonText, ], ); From 230d896d4b271cd1219da8f9343508915ecc20ce Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 27 Sep 2023 14:42:57 +0200 Subject: [PATCH 26/64] remove deprecated english translations --- src/languages/en.ts | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 7bcc65073826..cc02500a5975 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -72,6 +72,7 @@ import type { FormattedMaxLengthParams, RequestedAmountMessageParams, TagSelectionParams, + TranslationBase, } from './types'; import * as ReportActionsUtils from '../libs/ReportActionsUtils'; @@ -1784,16 +1785,6 @@ export default { selectSuggestedAddress: 'Please select a suggested address', }, }, - demos: { - saastr: { - signInWelcome: 'Welcome to SaaStr! Hop in to start networking now.', - heroBody: 'Use New Expensify for event updates, networking, social chatter, and to get paid back for lunch!', - }, - sbe: { - signInWelcome: 'Welcome to Small Business Expo! Get paid back for your ride.', - heroBody: 'Use New Expensify for event updates, networking, social chatter, and to get paid back for your ride to or from the show!', - }, - }, reportCardLostOrDamaged: { report: 'Report physical card loss / damage', screenTitle: 'Report card lost or damaged', @@ -1806,4 +1797,4 @@ export default { address: 'Address', deactivateCardButton: 'Deactivate card', }, -} as const; +} satisfies TranslationBase; From 2ecedc081aa676f62e5a7b79816025050f83276d Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 27 Sep 2023 14:50:38 +0200 Subject: [PATCH 27/64] add missing prop to dependency array --- src/components/Form.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Form.js b/src/components/Form.js index 716bd2d86d0f..8ef66d000c8d 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -477,6 +477,7 @@ function Form(props) { props.isSubmitActionDangerous, props.isSubmitButtonVisible, props.submitButtonText, + props.buttonStyles, ], ); From 81c8e27ce4010c43432d68931293900ecb80484b Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 27 Sep 2023 14:59:24 +0200 Subject: [PATCH 28/64] remove unused spanish translations --- src/languages/es.ts | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/languages/es.ts b/src/languages/es.ts index 2290c24e658a..da55f5a213c9 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -72,6 +72,7 @@ import type { FormattedMaxLengthParams, RequestedAmountMessageParams, TagSelectionParams, + EnglishTranslation, } from './types'; /* eslint-disable max-len */ @@ -2267,17 +2268,6 @@ export default { selectSuggestedAddress: 'Por favor, selecciona una dirección sugerida', }, }, - demos: { - saastr: { - signInWelcome: '¡Bienvenido a SaaStr! Entra y empieza a establecer contactos.', - heroBody: 'Utiliza New Expensify para estar al día de los eventos, establecer contactos, charlar en las redes sociales, ¡y para que te devuelvan el dinero de la comida!', - }, - sbe: { - signInWelcome: '¡Bienvenido a Small Business Expo! Recupera el dinero de tu viaje.', - heroBody: - 'Utiliza New Expensify para estar al día de los eventos, establecer contactos, charlar en las redes sociales y para que te paguen el viaje de ida y vuelta a la conferencia.', - }, - }, reportCardLostOrDamaged: { report: 'Notificar la pérdida / daño de la tarjeta física', screenTitle: 'Notificar la pérdida o deterioro de la tarjeta', @@ -2290,4 +2280,4 @@ export default { address: 'Dirección', deactivateCardButton: 'Desactivar tarjeta', }, -}; +} satisfies EnglishTranslation; From aca1aede6118414c4a62dd05be8f422892813462 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Sep 2023 10:28:03 +0200 Subject: [PATCH 29/64] Update CardSettings action --- src/libs/actions/CardSettings.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/libs/actions/CardSettings.js b/src/libs/actions/CardSettings.js index c8f35cb747cb..8246bc136bd8 100644 --- a/src/libs/actions/CardSettings.js +++ b/src/libs/actions/CardSettings.js @@ -2,10 +2,6 @@ import Onyx from 'react-native-onyx'; import ONYXKEYS from '../../ONYXKEYS'; import * as API from '../API'; -function getUpdatedCardsList(cardsList) { - return cardsList; -} - /** * Call the API to deactivate the card and request a new one * @param {String} cardId - id of the card that is going to be replaced @@ -16,21 +12,27 @@ function requestReplacementExpensifyCard(cardId, reason) { { onyxMethod: Onyx.METHOD.MERGE, key: ONYXKEYS.CARD_LIST, - value: {}, + value: { + isLoading: true, + }, }, ]; const successData = [ { onyxMethod: Onyx.METHOD.MERGE, key: ONYXKEYS.CARD_LIST, - value: {}, + value: { + isLoading: false, + }, }, ]; const failureData = [ { onyxMethod: Onyx.METHOD.MERGE, key: ONYXKEYS.CARD_LIST, - value: {}, + value: { + isLoading: false, + }, }, ]; @@ -48,4 +50,7 @@ function requestReplacementExpensifyCard(cardId, reason) { ); } -export {requestReplacementExpensifyCard, getUpdatedCardsList}; +export { + // eslint-disable-next-line import/prefer-default-export + requestReplacementExpensifyCard, +}; From a8d37670d30eb0ee3de605be598389545a517184 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Sep 2023 11:36:25 +0200 Subject: [PATCH 30/64] add missing translations --- src/languages/en.ts | 1 + src/languages/es.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/languages/en.ts b/src/languages/en.ts index cc02500a5975..597356b9801b 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -815,6 +815,7 @@ export default { availableSpend: 'Remaining spending power', virtualCardNumber: 'Virtual card number', physicalCardNumber: 'Physical card number', + reportCardLostOrDamaged: 'Report physical card loss / damage', }, transferAmountPage: { transfer: ({amount}: TransferParams) => `Transfer${amount ? ` ${amount}` : ''}`, diff --git a/src/languages/es.ts b/src/languages/es.ts index da55f5a213c9..39bd5800ad60 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -810,6 +810,7 @@ export default { availableSpend: 'Capacidad de gasto restante', virtualCardNumber: 'Número de la tarjeta virtual', physicalCardNumber: 'Número de la tarjeta física', + reportCardLostOrDamaged: 'Notificar la pérdida/daño de la tarjeta física' }, transferAmountPage: { transfer: ({amount}: TransferParams) => `Transferir${amount ? ` ${amount}` : ''}`, From 012522fc296217fb70447bf8efaed1a6f4d6c338 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Sep 2023 11:37:43 +0200 Subject: [PATCH 31/64] modify route definition --- src/ROUTES.ts | 5 ++++- src/languages/es.ts | 2 +- src/libs/Navigation/linkingConfig.js | 2 +- .../settings/Wallet/ExpensifyCardPage.js | 22 ++++++++++++++----- 4 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 5ccbc9957af1..dab8d9724b25 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -81,7 +81,10 @@ export default { SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments', SETTINGS_WALLET_TRANSFER_BALANCE: 'settings/wallet/transfer-balance', SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT: 'settings/wallet/choose-transfer-account', - SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED: 'settings/wallet/report-card-lost-or-damaged', + SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED: { + route: '/settings/wallet/cards/:domain/report-card-lost-or-damaged', + getRoute: (domain: string) => `/settings/wallet/cards/${domain}/report-card-lost-or-damaged`, + }, SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details', SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name', SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: 'settings/profile/personal-details/date-of-birth', diff --git a/src/languages/es.ts b/src/languages/es.ts index 39bd5800ad60..2bbc9a9e022f 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -810,7 +810,7 @@ export default { availableSpend: 'Capacidad de gasto restante', virtualCardNumber: 'Número de la tarjeta virtual', physicalCardNumber: 'Número de la tarjeta física', - reportCardLostOrDamaged: 'Notificar la pérdida/daño de la tarjeta física' + reportCardLostOrDamaged: 'Notificar la pérdida/daño de la tarjeta física', }, transferAmountPage: { transfer: ({amount}: TransferParams) => `Transferir${amount ? ` ${amount}` : ''}`, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 908a7817e415..2db113802850 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -86,7 +86,7 @@ export default { exact: true, }, Settings_ReportCardLostOrDamaged: { - path: ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED, + path: ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.route, exact: true, }, Settings_Add_Debit_Card: { diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js index bc49301e8d80..6ac2dc852438 100644 --- a/src/pages/settings/Wallet/ExpensifyCardPage.js +++ b/src/pages/settings/Wallet/ExpensifyCardPage.js @@ -15,6 +15,7 @@ import useLocalize from '../../../hooks/useLocalize'; import * as CurrencyUtils from '../../../libs/CurrencyUtils'; import Navigation from '../../../libs/Navigation/Navigation'; import styles from '../../../styles/styles'; +import * as Expensicons from '../../../components/Icon/Expensicons'; import * as CardUtils from '../../../libs/CardUtils'; const propTypes = { @@ -82,12 +83,21 @@ function ExpensifyCardPage({ /> )} {!_.isEmpty(physicalCard) && ( - + <> + + Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute({domain}))} + /> + )} From 68f2b5b235b794688fc68e6e20309012e7075d3a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Sep 2023 15:12:44 +0200 Subject: [PATCH 32/64] rename card actions file --- src/libs/actions/Card.js | 52 +++++++++++++++++++++++++++++ src/libs/actions/CardSettings.js | 56 -------------------------------- 2 files changed, 52 insertions(+), 56 deletions(-) create mode 100644 src/libs/actions/Card.js delete mode 100644 src/libs/actions/CardSettings.js diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js new file mode 100644 index 000000000000..d3ba3e2c1eda --- /dev/null +++ b/src/libs/actions/Card.js @@ -0,0 +1,52 @@ +import Onyx from 'react-native-onyx'; +import ONYXKEYS from '../../ONYXKEYS'; +import * as API from '../API'; + +/** + * Call the API to deactivate the card and request a new one + * @param {String} cardId - id of the card that is going to be replaced + * @param {String} reason - reason for replacement ('damaged' | 'stolen') + */ +function requestReplacementExpensifyCard(cardId, reason) { + API.write( + 'RequestReplacementExpensifyCard', + { + cardId, + reason, + }, + { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_LOST_FORM, + value: { + isLoading: true, + }, + }, + ], + successData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.FORMS.REPORT_FRAUD_FORM, + value: { + isLoading: false, + }, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_LOST_FORM, + value: { + isLoading: false, + }, + }, + ], + }, + ); +} + +export { + // eslint-disable-next-line import/prefer-default-export + requestReplacementExpensifyCard, +}; diff --git a/src/libs/actions/CardSettings.js b/src/libs/actions/CardSettings.js deleted file mode 100644 index 8246bc136bd8..000000000000 --- a/src/libs/actions/CardSettings.js +++ /dev/null @@ -1,56 +0,0 @@ -import Onyx from 'react-native-onyx'; -import ONYXKEYS from '../../ONYXKEYS'; -import * as API from '../API'; - -/** - * Call the API to deactivate the card and request a new one - * @param {String} cardId - id of the card that is going to be replaced - * @param {String} reason - reason for replacement ('damaged' | 'stolen') - */ -function requestReplacementExpensifyCard(cardId, reason) { - const optimisticData = [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.CARD_LIST, - value: { - isLoading: true, - }, - }, - ]; - const successData = [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.CARD_LIST, - value: { - isLoading: false, - }, - }, - ]; - const failureData = [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.CARD_LIST, - value: { - isLoading: false, - }, - }, - ]; - - API.write( - 'RequestReplacementExpensifyCard', - { - cardId, - reason, - }, - { - optimisticData, - successData, - failureData, - }, - ); -} - -export { - // eslint-disable-next-line import/prefer-default-export - requestReplacementExpensifyCard, -}; From cd9856661948622ebde49a80bfda97e27ee1b4d2 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Sep 2023 15:18:21 +0200 Subject: [PATCH 33/64] rename onyx form key --- src/ONYXKEYS.ts | 4 ++-- src/libs/actions/Card.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index ee1575e1b5c2..727e17c9d226 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -291,7 +291,7 @@ const ONYXKEYS = { PRIVATE_NOTES_FORM: 'privateNotesForm', I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm', INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm', - REPORT_PHYSICAL_CARD_LOST: 'reportPhysicalCardLostForm', + REPORT_PHYSICAL_CARD: 'reportPhysicalCardLostForm', }, } as const; @@ -422,7 +422,7 @@ type OnyxValues = { [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_AFTER_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM]: OnyxTypes.Form; - [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_LOST]: OnyxTypes.Form; + [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD]: OnyxTypes.Form; }; export default ONYXKEYS; diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js index d3ba3e2c1eda..a1350cbbee24 100644 --- a/src/libs/actions/Card.js +++ b/src/libs/actions/Card.js @@ -18,7 +18,7 @@ function requestReplacementExpensifyCard(cardId, reason) { optimisticData: [ { onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_LOST_FORM, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD, value: { isLoading: true, }, @@ -36,7 +36,7 @@ function requestReplacementExpensifyCard(cardId, reason) { failureData: [ { onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_LOST_FORM, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD, value: { isLoading: false, }, From 13b479ea6920728cc1a63dc21ac82c7e32ee4055 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Sep 2023 15:20:15 +0200 Subject: [PATCH 34/64] allow reporting card loss from the card page --- src/pages/settings/Wallet/ExpensifyCardPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js index 6ac2dc852438..385e4b11943e 100644 --- a/src/pages/settings/Wallet/ExpensifyCardPage.js +++ b/src/pages/settings/Wallet/ExpensifyCardPage.js @@ -95,7 +95,7 @@ function ExpensifyCardPage({ titleStyle={styles.walletCardMenuItem} icon={Expensicons.Flag} shouldShowRightIcon - onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute({domain}))} + onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(domain))} /> )} From 35257fc6d877050cd2d5747d520b8cb3318084bf Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Sep 2023 15:38:49 +0200 Subject: [PATCH 35/64] add translations for error message --- src/languages/en.ts | 1 + src/languages/es.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/languages/en.ts b/src/languages/en.ts index 597356b9801b..dffa7c54923d 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1797,5 +1797,6 @@ export default { currentCardInfo: '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', + addressError: 'Address is required', }, } satisfies TranslationBase; diff --git a/src/languages/es.ts b/src/languages/es.ts index 2bbc9a9e022f..c8116b714474 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2280,5 +2280,6 @@ export default { 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.', address: 'Dirección', deactivateCardButton: 'Desactivar tarjeta', + addressError: 'La dirección es obligatoria', }, } satisfies EnglishTranslation; From 4508c0dde6e46be7a165ecfc7ab8d9c2537aa2dd Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 28 Sep 2023 15:50:56 +0200 Subject: [PATCH 36/64] finish implementing report flow --- src/libs/CardUtils.ts | 23 +++- .../settings/Wallet/ReportCardLostPage.js | 103 +++++++++++------- 2 files changed, 88 insertions(+), 38 deletions(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 30bb17f3db52..7c91474abb0e 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -56,4 +56,25 @@ function maskCard(lastFour = ''): string { return maskedString.replace(/(.{4})/g, '$1 ').trim(); } -export {getDomainCards, getCompanyCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard}; +/** + * Formats an address object into an easily readable string + * + * @returns - formatted address + */ +function getFormattedAddress(privatePersonalDetails: OnyxTypes.PrivatePersonalDetails): string | null { + const {address} = privatePersonalDetails; + const [street1, street2] = (address?.street ?? '').split('\n'); + const addressItems = [street1, street2, address?.city, address?.state, address?.zip, address?.country]; + const areAllAddressItemsEmpty = addressItems.every((item) => !item); + + if (areAllAddressItemsEmpty) { + return null; + } + + const formatted = addressItems.join(', '); + + // Remove the last comma of the address + return formatted.trim().replace(/,$/, ''); +} + +export {getDomainCards, getCompanyCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getFormattedAddress}; diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 918c842937cc..e9474baf44bd 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -1,4 +1,5 @@ -import React, {useMemo, useState} from 'react'; +import React, {useState, useEffect} from 'react'; +import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import {View} from 'react-native'; @@ -14,6 +15,12 @@ import useLocalize from '../../../hooks/useLocalize'; import Text from '../../../components/Text'; import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription'; import usePrivatePersonalDetails from '../../../hooks/usePrivatePersonalDetails'; +import assignedCardPropTypes from './assignedCardPropTypes'; +import * as CardUtils from '../../../libs/CardUtils'; +import NotFoundPage from '../../ErrorPage/NotFoundPage'; +import usePrevious from '../../../hooks/usePrevious'; +import * as FormActions from '../../../libs/actions/FormActions'; +import * as CardActions from '../../../libs/actions/Card'; /** Options for reason selector */ const OPTIONS = [ @@ -28,6 +35,10 @@ const OPTIONS = [ ]; const propTypes = { + /** Onyx form data */ + formData: PropTypes.shape({ + isLoading: PropTypes.bool, + }), /** User's private personal details */ privatePersonalDetails: PropTypes.shape({ /** User's home address */ @@ -39,9 +50,19 @@ const propTypes = { country: PropTypes.string, }), }), + /** User's cards list */ + cardList: PropTypes.objectOf(assignedCardPropTypes), + route: PropTypes.shape({ + /** Each parameter passed via the URL */ + params: PropTypes.shape({ + /** Domain string */ + domain: PropTypes.string, + }), + }).isRequired, }; const defaultProps = { + formData: {}, privatePersonalDetails: { address: { street: '', @@ -52,13 +73,21 @@ const defaultProps = { country: '', }, }, + cardList: {}, }; -function ReportCardLostPage({privatePersonalDetails}) { +function ReportCardLostPage({ + privatePersonalDetails, + cardList, + route: { + params: {domain}, + }, + formData, +}) { usePrivatePersonalDetails(); - const privateDetails = privatePersonalDetails || {}; - const address = privateDetails.address || {}; + const domainCards = CardUtils.getDomainCards(cardList)[domain]; + const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {}; const {translate} = useLocalize(); @@ -66,47 +95,38 @@ function ReportCardLostPage({privatePersonalDetails}) { const [isReasonConfirmed, setIsReasonConfirmed] = useState(false); const [shouldShowAddressError, setShouldShowAddressError] = useState(false); - /** - * Applies common formatting to each piece of an address - * - * @param {String} piece - * @returns {String} - */ - const formatPiece = (piece) => (piece ? `${piece}, ` : ''); - - /** - * Formats an address object into an easily readable string - * - * @returns {String} - */ - const formattedAddress = useMemo(() => { - const [street1, street2] = (address.street || '').split('\n'); - const formatted = formatPiece(street1) + formatPiece(street2) + formatPiece(address.city) + formatPiece(address.state) + formatPiece(address.zip) + formatPiece(address.country); - - // Remove the last comma of the address - return formatted.trim().replace(/,$/, ''); - }, [address.city, address.country, address.state, address.street, address.zip]); - - const validate = () => { - if (!isReasonConfirmed) { - setShouldShowAddressError(false); - return {}; + const prevIsLoading = usePrevious(formData.isLoading); + + const formattedAddress = CardUtils.getFormattedAddress(privatePersonalDetails); + + useEffect(() => { + if (prevIsLoading && !formData.isLoading && _.isEmpty(physicalCard.errors)) { + Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain)); } - if (!formattedAddress) { - setShouldShowAddressError(true); - return {}; + if (formData.isLoading && _.isEmpty(physicalCard.errors)) { + return; } - }; + + FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD, physicalCard.errors); + }, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]); const onSubmit = () => { if (!isReasonConfirmed) { setIsReasonConfirmed(true); + + setShouldShowAddressError(false); + return; } if (!formattedAddress) { - // TODO: submit + setShouldShowAddressError(true); + return; + } + + if (formattedAddress) { + CardActions.requestReplacementExpensifyCard(physicalCard.cardID, reason); } }; @@ -114,6 +134,10 @@ function ReportCardLostPage({privatePersonalDetails}) { setReason(option); }; + if (_.isEmpty(physicalCard)) { + return ; + } + return ( Navigation.goBack(ROUTES.SETTINGS_WALLET)} />
Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} numberOfLinesTitle={2} /> - {shouldShowAddressError && Address missing} + {shouldShowAddressError && {translate('reportCardLostOrDamaged.addressError')}} {translate('reportCardLostOrDamaged.currentCardInfo')} ) : ( @@ -165,4 +188,10 @@ export default withOnyx({ privatePersonalDetails: { key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, }, + cardList: { + key: ONYXKEYS.CARD_LIST, + }, + formData: { + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD, + }, })(ReportCardLostPage); From 7aef7378591ea48c5e0082fedaa3bf2a0c36e02a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 29 Sep 2023 09:05:50 +0200 Subject: [PATCH 37/64] remove buttonStyles prop from Form --- src/components/Form.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/Form.js b/src/components/Form.js index 8ef66d000c8d..ef6c3ea10474 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -82,9 +82,6 @@ const propTypes = { /** Information about the network */ network: networkPropTypes.isRequired, - /** Custom styles for submit button */ - buttonStyles: stylePropTypes, - ...withLocalizePropTypes, }; @@ -102,7 +99,6 @@ const defaultProps = { footerContent: null, style: [], validate: () => ({}), - buttonStyles: [], }; function Form(props) { @@ -455,7 +451,6 @@ function Form(props) { enabledWhenOffline={props.enabledWhenOffline} isSubmitActionDangerous={props.isSubmitActionDangerous} disablePressOnEnter - buttonStyles={props.buttonStyles} /> )} @@ -477,7 +472,6 @@ function Form(props) { props.isSubmitActionDangerous, props.isSubmitButtonVisible, props.submitButtonText, - props.buttonStyles, ], ); From 60662c5106e9eba42788fb6b8423e2a963be576a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 29 Sep 2023 09:10:51 +0200 Subject: [PATCH 38/64] rename onyx key --- src/ONYXKEYS.ts | 4 ++-- src/libs/actions/Card.js | 4 ++-- .../settings/Wallet/ReportCardLostPage.js | 23 +++++++++++-------- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 727e17c9d226..bfa11b1ab494 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -291,7 +291,7 @@ const ONYXKEYS = { PRIVATE_NOTES_FORM: 'privateNotesForm', I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm', INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm', - REPORT_PHYSICAL_CARD: 'reportPhysicalCardLostForm', + REPORT_PHYSICAL_CARD_FORM: 'reportPhysicalCardLostForm', }, } as const; @@ -422,7 +422,7 @@ type OnyxValues = { [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_AFTER_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM]: OnyxTypes.Form; - [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD]: OnyxTypes.Form; + [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM]: OnyxTypes.Form; }; export default ONYXKEYS; diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js index a1350cbbee24..932a619b9598 100644 --- a/src/libs/actions/Card.js +++ b/src/libs/actions/Card.js @@ -18,7 +18,7 @@ function requestReplacementExpensifyCard(cardId, reason) { optimisticData: [ { onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, value: { isLoading: true, }, @@ -36,7 +36,7 @@ function requestReplacementExpensifyCard(cardId, reason) { failureData: [ { onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, value: { isLoading: false, }, diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index e9474baf44bd..a1b3e9824a94 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -108,7 +108,7 @@ function ReportCardLostPage({ return; } - FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD, physicalCard.errors); + FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, physicalCard.errors); }, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]); const onSubmit = () => { @@ -139,21 +139,23 @@ function ReportCardLostPage({ } return ( - + Navigation.goBack(ROUTES.SETTINGS_WALLET)} /> {isReasonConfirmed ? ( <> - {translate('reportCardLostOrDamaged.confirmAddressTitle')} + {translate('reportCardLostOrDamaged.confirmAddressTitle')} Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} numberOfLinesTitle={2} + wrapperStyle={styles.ph0} /> - {shouldShowAddressError && {translate('reportCardLostOrDamaged.addressError')}} - {translate('reportCardLostOrDamaged.currentCardInfo')} + {shouldShowAddressError && {translate('reportCardLostOrDamaged.addressError')}} + {translate('reportCardLostOrDamaged.currentCardInfo')} ) : ( - + {translate('reportCardLostOrDamaged.reasonTitle')} Date: Fri, 29 Sep 2023 13:30:19 +0200 Subject: [PATCH 39/64] filter empty address values --- src/libs/CardUtils.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 7c91474abb0e..9d0c798c76d8 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -65,7 +65,9 @@ function getFormattedAddress(privatePersonalDetails: OnyxTypes.PrivatePersonalDe const {address} = privatePersonalDetails; const [street1, street2] = (address?.street ?? '').split('\n'); const addressItems = [street1, street2, address?.city, address?.state, address?.zip, address?.country]; - const areAllAddressItemsEmpty = addressItems.every((item) => !item); + // Filter empty values ('' or undefined) from the array + const filteredAddressItems = addressItems.filter((item) => item); + const areAllAddressItemsEmpty = !filteredAddressItems.length; if (areAllAddressItemsEmpty) { return null; From 68130707f8d7db55b1b9a99b500714a0d7801463 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 29 Sep 2023 13:50:14 +0200 Subject: [PATCH 40/64] make early return as early as possible --- src/pages/settings/Wallet/ReportCardLostPage.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index a1b3e9824a94..f36f79057561 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -111,6 +111,10 @@ function ReportCardLostPage({ FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, physicalCard.errors); }, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]); + if (_.isEmpty(physicalCard)) { + return ; + } + const onSubmit = () => { if (!isReasonConfirmed) { setIsReasonConfirmed(true); @@ -134,10 +138,6 @@ function ReportCardLostPage({ setReason(option); }; - if (_.isEmpty(physicalCard)) { - return ; - } - return ( Date: Fri, 29 Sep 2023 13:59:28 +0200 Subject: [PATCH 41/64] modify constant value --- src/ONYXKEYS.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index bfa11b1ab494..9c895f8bfd10 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -291,7 +291,7 @@ const ONYXKEYS = { PRIVATE_NOTES_FORM: 'privateNotesForm', I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm', INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm', - REPORT_PHYSICAL_CARD_FORM: 'reportPhysicalCardLostForm', + REPORT_PHYSICAL_CARD_FORM: 'reportPhysicalCardForm', }, } as const; From 0f869cdca10e1168336226975a629ffe42a851e7 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 4 Oct 2023 10:11:54 +0200 Subject: [PATCH 42/64] remove redundant translation --- src/languages/en.ts | 1 - src/languages/es.ts | 1 - src/pages/settings/Wallet/ExpensifyCardPage.js | 2 +- 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index dffa7c54923d..07f983c84593 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -815,7 +815,6 @@ export default { availableSpend: 'Remaining spending power', virtualCardNumber: 'Virtual card number', physicalCardNumber: 'Physical card number', - reportCardLostOrDamaged: 'Report physical card loss / damage', }, transferAmountPage: { transfer: ({amount}: TransferParams) => `Transfer${amount ? ` ${amount}` : ''}`, diff --git a/src/languages/es.ts b/src/languages/es.ts index c8116b714474..3b3a8f80c0b2 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -810,7 +810,6 @@ export default { availableSpend: 'Capacidad de gasto restante', virtualCardNumber: 'Número de la tarjeta virtual', physicalCardNumber: 'Número de la tarjeta física', - reportCardLostOrDamaged: 'Notificar la pérdida/daño de la tarjeta física', }, transferAmountPage: { transfer: ({amount}: TransferParams) => `Transferir${amount ? ` ${amount}` : ''}`, diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js index 385e4b11943e..32dadc873a9c 100644 --- a/src/pages/settings/Wallet/ExpensifyCardPage.js +++ b/src/pages/settings/Wallet/ExpensifyCardPage.js @@ -91,7 +91,7 @@ function ExpensifyCardPage({ titleStyle={styles.walletCardNumber} /> Date: Wed, 4 Oct 2023 10:19:41 +0200 Subject: [PATCH 43/64] use correct form key --- src/libs/actions/Card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js index 932a619b9598..dc8415106bf2 100644 --- a/src/libs/actions/Card.js +++ b/src/libs/actions/Card.js @@ -27,7 +27,7 @@ function requestReplacementExpensifyCard(cardId, reason) { successData: [ { onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.FORMS.REPORT_FRAUD_FORM, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, value: { isLoading: false, }, From a31a261cbbff074c09692b7f59c91bce9365d932 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 4 Oct 2023 11:04:18 +0200 Subject: [PATCH 44/64] create findPhysicalCard helper funciton --- src/libs/CardUtils.ts | 11 ++++++++++- src/pages/settings/Wallet/ReportCardLostPage.js | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 9d0c798c76d8..a6129a27f3b2 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -79,4 +79,13 @@ function getFormattedAddress(privatePersonalDetails: OnyxTypes.PrivatePersonalDe return formatted.trim().replace(/,$/, ''); } -export {getDomainCards, getCompanyCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getFormattedAddress}; +/** + * Finds physical card in a list of cards + * + * @returns a physical card object (or undefined if none is found) + */ +function findPhysicalCard(cards: Card[]) { + return cards.find((card) => !card.isVirtual); +} + +export {getDomainCards, getCompanyCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getFormattedAddress, findPhysicalCard}; diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index f36f79057561..304d75b70b82 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -87,7 +87,7 @@ function ReportCardLostPage({ usePrivatePersonalDetails(); const domainCards = CardUtils.getDomainCards(cardList)[domain]; - const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {}; + const physicalCard = CardUtils.findPhysicalCard(domainCards); const {translate} = useLocalize(); From da0774184a7488e33ff70c1b38948505c9abab00 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 4 Oct 2023 11:41:26 +0200 Subject: [PATCH 45/64] split onSubmit into two functions --- src/pages/settings/Wallet/ReportCardLostPage.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 304d75b70b82..5a35c736a8ea 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -134,6 +134,20 @@ function ReportCardLostPage({ } }; + const handleSubmitFirstStep = () => { + setIsReasonConfirmed(true); + setShouldShowAddressError(false); + }; + + const handleSubmitSecondStep = () => { + if (!formattedAddress) { + setShouldShowAddressError(true); + return; + } + + CardActions.requestReplacementExpensifyCard(physicalCard.cardID, reason); + }; + const handleOptionSelect = (option) => { setReason(option); }; @@ -149,7 +163,7 @@ function ReportCardLostPage({ /> From dd9e502202ba9bb3869f78b760a4c41f0102cfd0 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 4 Oct 2023 11:48:01 +0200 Subject: [PATCH 46/64] remove unused funciton --- .../settings/Wallet/ReportCardLostPage.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 5a35c736a8ea..6765d56af661 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -115,25 +115,6 @@ function ReportCardLostPage({ return ; } - const onSubmit = () => { - if (!isReasonConfirmed) { - setIsReasonConfirmed(true); - - setShouldShowAddressError(false); - - return; - } - - if (!formattedAddress) { - setShouldShowAddressError(true); - return; - } - - if (formattedAddress) { - CardActions.requestReplacementExpensifyCard(physicalCard.cardID, reason); - } - }; - const handleSubmitFirstStep = () => { setIsReasonConfirmed(true); setShouldShowAddressError(false); From 3fccb6f88a7e10b2a47a7a47d0484088c4a442fe Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 4 Oct 2023 13:18:56 +0200 Subject: [PATCH 47/64] split use effect into two simpler ones --- src/pages/settings/Wallet/ReportCardLostPage.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 6765d56af661..45a14ad97077 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -103,13 +103,13 @@ function ReportCardLostPage({ if (prevIsLoading && !formData.isLoading && _.isEmpty(physicalCard.errors)) { Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain)); } + }, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]); - if (formData.isLoading && _.isEmpty(physicalCard.errors)) { - return; + useEffect(() => { + if (!(formData.isLoading && _.isEmpty(physicalCard.errors))) { + FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, physicalCard.errors); } - - FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, physicalCard.errors); - }, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]); + }, [formData.isLoading, physicalCard.errors]); if (_.isEmpty(physicalCard)) { return ; From 1fe6321ffe5c05fcf354ddbedcf3e2e8153a18c2 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 4 Oct 2023 13:40:34 +0200 Subject: [PATCH 48/64] move getFormattedAddress method to PersonalDetailsUtils --- src/libs/CardUtils.ts | 25 +---------------- src/libs/PersonalDetailsUtils.js | 27 ++++++++++++++++++- .../settings/Wallet/ReportCardLostPage.js | 3 ++- 3 files changed, 29 insertions(+), 26 deletions(-) diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index a6129a27f3b2..808cd5d6eb6a 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -56,29 +56,6 @@ function maskCard(lastFour = ''): string { return maskedString.replace(/(.{4})/g, '$1 ').trim(); } -/** - * Formats an address object into an easily readable string - * - * @returns - formatted address - */ -function getFormattedAddress(privatePersonalDetails: OnyxTypes.PrivatePersonalDetails): string | null { - const {address} = privatePersonalDetails; - const [street1, street2] = (address?.street ?? '').split('\n'); - const addressItems = [street1, street2, address?.city, address?.state, address?.zip, address?.country]; - // Filter empty values ('' or undefined) from the array - const filteredAddressItems = addressItems.filter((item) => item); - const areAllAddressItemsEmpty = !filteredAddressItems.length; - - if (areAllAddressItemsEmpty) { - return null; - } - - const formatted = addressItems.join(', '); - - // Remove the last comma of the address - return formatted.trim().replace(/,$/, ''); -} - /** * Finds physical card in a list of cards * @@ -88,4 +65,4 @@ function findPhysicalCard(cards: Card[]) { return cards.find((card) => !card.isVirtual); } -export {getDomainCards, getCompanyCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getFormattedAddress, findPhysicalCard}; +export {getDomainCards, getCompanyCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, findPhysicalCard}; diff --git a/src/libs/PersonalDetailsUtils.js b/src/libs/PersonalDetailsUtils.js index a401dea4b911..6b9335ab263d 100644 --- a/src/libs/PersonalDetailsUtils.js +++ b/src/libs/PersonalDetailsUtils.js @@ -152,4 +152,29 @@ function getNewPersonalDetailsOnyxData(logins, accountIDs) { }; } -export {getDisplayNameOrDefault, getPersonalDetailsByIDs, getAccountIDsByLogins, getLoginsByAccountIDs, getNewPersonalDetailsOnyxData}; +/** + * Applies common formatting to each piece of an address + * + * @param {String} piece - address piece to format + * @returns {String} - formatted piece + */ +function formatPiece(piece) { + return piece ? `${piece}, ` : ''; +} + +/** + * Formats an address object into an easily readable string + * + * @param {OnyxTypes.PrivatePersonalDetails} privatePersonalDetails - details object + * @returns {String} - formatted address + */ +function getFormattedAddress(privatePersonalDetails) { + const {address} = privatePersonalDetails; + const [street1, street2] = (address.street || '').split('\n'); + const formattedAddress = formatPiece(street1) + formatPiece(street2) + formatPiece(address.city) + formatPiece(address.state) + formatPiece(address.zip) + formatPiece(address.country); + + // Remove the last comma of the address + return formattedAddress.trim().replace(/,$/, ''); +} + +export {getDisplayNameOrDefault, getPersonalDetailsByIDs, getAccountIDsByLogins, getLoginsByAccountIDs, getNewPersonalDetailsOnyxData, getFormattedAddress}; diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 45a14ad97077..6e404f861736 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -17,6 +17,7 @@ import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescr import usePrivatePersonalDetails from '../../../hooks/usePrivatePersonalDetails'; import assignedCardPropTypes from './assignedCardPropTypes'; import * as CardUtils from '../../../libs/CardUtils'; +import * as PersonalDetailsUtils from '../../../libs/PersonalDetailsUtils'; import NotFoundPage from '../../ErrorPage/NotFoundPage'; import usePrevious from '../../../hooks/usePrevious'; import * as FormActions from '../../../libs/actions/FormActions'; @@ -97,7 +98,7 @@ function ReportCardLostPage({ const prevIsLoading = usePrevious(formData.isLoading); - const formattedAddress = CardUtils.getFormattedAddress(privatePersonalDetails); + const formattedAddress = PersonalDetailsUtils.getFormattedAddress(privatePersonalDetails); useEffect(() => { if (prevIsLoading && !formData.isLoading && _.isEmpty(physicalCard.errors)) { From 7da72a30d30b9d121b5c557aeab6b1d029c41fb1 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 5 Oct 2023 10:34:04 +0200 Subject: [PATCH 49/64] add early returns to effects --- src/pages/settings/Wallet/ReportCardLostPage.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 6e404f861736..cb2ee9148ab1 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -101,15 +101,21 @@ function ReportCardLostPage({ const formattedAddress = PersonalDetailsUtils.getFormattedAddress(privatePersonalDetails); useEffect(() => { - if (prevIsLoading && !formData.isLoading && _.isEmpty(physicalCard.errors)) { + if (!_.isEmpty(physicalCard.errors)) { + return; + } + + if (prevIsLoading && !formData.isLoading) { Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain)); } }, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]); useEffect(() => { - if (!(formData.isLoading && _.isEmpty(physicalCard.errors))) { - FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, physicalCard.errors); + if (formData.isLoading && _.isEmpty(physicalCard.errors)) { + return; } + + FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, physicalCard.errors); }, [formData.isLoading, physicalCard.errors]); if (_.isEmpty(physicalCard)) { From 3fbd5ef1741cdf7140cbd5b983db9909f09da395 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 6 Oct 2023 09:58:07 +0200 Subject: [PATCH 50/64] minor code changes, improvements --- src/libs/actions/Card.js | 1 + src/pages/settings/Wallet/ReportCardLostPage.js | 6 ++---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js index dc8415106bf2..10f4e369ec2e 100644 --- a/src/libs/actions/Card.js +++ b/src/libs/actions/Card.js @@ -21,6 +21,7 @@ function requestReplacementExpensifyCard(cardId, reason) { key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, value: { isLoading: true, + errors: null, }, }, ], diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index cb2ee9148ab1..aedf57874898 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -101,13 +101,11 @@ function ReportCardLostPage({ const formattedAddress = PersonalDetailsUtils.getFormattedAddress(privatePersonalDetails); useEffect(() => { - if (!_.isEmpty(physicalCard.errors)) { + if (!_.isEmpty(physicalCard.errors) || !(prevIsLoading && !formData.isLoading)) { return; } - if (prevIsLoading && !formData.isLoading) { - Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain)); - } + Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain)); }, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]); useEffect(() => { From f7600fba244068858ac55980cb8c1f35417ba57c Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 6 Oct 2023 10:10:56 +0200 Subject: [PATCH 51/64] remove left margin from singleOptionSelector --- src/components/SelectCircle.js | 7 ++++++- src/components/SingleOptionSelector.js | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js index 93cf285eab59..9429e662e4bf 100644 --- a/src/components/SelectCircle.js +++ b/src/components/SelectCircle.js @@ -9,15 +9,20 @@ import themeColors from '../styles/themes/default'; const propTypes = { /** Should we show the checkmark inside the circle */ isChecked: PropTypes.bool, + + /** Additional styles to pass to SelectCircle */ + // eslint-disable-next-line react/forbid-prop-types + styles: PropTypes.arrayOf(PropTypes.object), }; const defaultProps = { isChecked: false, + styles: [], }; function SelectCircle(props) { return ( - + {props.isChecked && ( - + {translate(option.label)} ))} From fa2169e648a8f3dcf86ff1c30346b375246990d3 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 6 Oct 2023 10:48:06 +0200 Subject: [PATCH 52/64] remove preselected reason, add reason error --- src/components/SingleOptionSelector.js | 4 ++-- src/languages/en.ts | 1 + src/languages/es.ts | 1 + src/pages/settings/Wallet/ReportCardLostPage.js | 13 +++++++++++-- 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js index 779bdc02ea86..ffd90500d1a2 100644 --- a/src/components/SingleOptionSelector.js +++ b/src/components/SingleOptionSelector.js @@ -28,7 +28,7 @@ const propTypes = { const defaultProps = { options: [], - selectedOptionKey: '', + selectedOptionKey: undefined, onSelectOption: () => {}, }; @@ -46,7 +46,7 @@ function SingleOptionSelector({options, selectedOptionKey, onSelectOption, trans accessibilityLabel={option.label} > {translate(option.label)} diff --git a/src/languages/en.ts b/src/languages/en.ts index 07f983c84593..58632ca0a093 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1797,5 +1797,6 @@ export default { address: 'Address', deactivateCardButton: 'Deactivate card', addressError: 'Address is required', + reasonError: 'Reason is required', }, } satisfies TranslationBase; diff --git a/src/languages/es.ts b/src/languages/es.ts index 3b3a8f80c0b2..a62034218d58 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2280,5 +2280,6 @@ export default { address: 'Dirección', deactivateCardButton: 'Desactivar tarjeta', addressError: 'La dirección es obligatoria', + reasonError: 'Se requiere justificación', }, } satisfies EnglishTranslation; diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index aedf57874898..30a44ea2fa9e 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -92,9 +92,10 @@ function ReportCardLostPage({ const {translate} = useLocalize(); - const [reason, setReason] = useState(OPTIONS[0]); + const [reason, setReason] = useState(); const [isReasonConfirmed, setIsReasonConfirmed] = useState(false); const [shouldShowAddressError, setShouldShowAddressError] = useState(false); + const [shouldShowReasonError, setShouldShowReasonError] = useState(false); const prevIsLoading = usePrevious(formData.isLoading); @@ -121,8 +122,14 @@ function ReportCardLostPage({ } const handleSubmitFirstStep = () => { + if (!reason) { + setShouldShowReasonError(true); + return; + } + setIsReasonConfirmed(true); setShouldShowAddressError(false); + setShouldShowReasonError(false); }; const handleSubmitSecondStep = () => { @@ -136,6 +143,7 @@ function ReportCardLostPage({ const handleOptionSelect = (option) => { setReason(option); + setShouldShowReasonError(false); }; return ( @@ -173,9 +181,10 @@ function ReportCardLostPage({ {translate('reportCardLostOrDamaged.reasonTitle')} + {shouldShowReasonError && {translate('reportCardLostOrDamaged.reasonError')}} )} From 99c544f8be9e5603e6d669216a30444e79c8157c Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 6 Oct 2023 11:02:15 +0200 Subject: [PATCH 53/64] shrink pressable area in SingleOptionSelector --- src/components/SingleOptionSelector.js | 30 +++++++++++++++----------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js index ffd90500d1a2..3fa67ae01a75 100644 --- a/src/components/SingleOptionSelector.js +++ b/src/components/SingleOptionSelector.js @@ -36,21 +36,25 @@ function SingleOptionSelector({options, selectedOptionKey, onSelectOption, trans return ( {_.map(options, (option) => ( - onSelectOption(option)} - accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} - accessibilityState={{checked: selectedOptionKey === option.key}} - aria-checked={selectedOptionKey === option.key} - accessibilityLabel={option.label} > - - {translate(option.label)} - + onSelectOption(option)} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} + accessibilityState={{checked: selectedOptionKey === option.key}} + aria-checked={selectedOptionKey === option.key} + accessibilityLabel={option.label} + > + + {translate(option.label)} + + ))} ); From d1f86ff1d18b0d0f9000d2b3522693f2892dfb54 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 6 Oct 2023 11:12:22 +0200 Subject: [PATCH 54/64] allow going back to the previous step --- src/pages/settings/Wallet/ReportCardLostPage.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 30a44ea2fa9e..64a8367c82dd 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -146,6 +146,15 @@ function ReportCardLostPage({ setShouldShowReasonError(false); }; + const handleBackButtonPress = () => { + if (isReasonConfirmed) { + setIsReasonConfirmed(false); + return; + } + + Navigation.goBack(ROUTES.SETTINGS_WALLET); + }; + return ( Navigation.goBack(ROUTES.SETTINGS_WALLET)} + onBackButtonPress={handleBackButtonPress} />
Date: Fri, 6 Oct 2023 11:36:32 +0200 Subject: [PATCH 55/64] use FormAlertWithSubmitButton instead of Form --- .../settings/Wallet/ReportCardLostPage.js | 66 +++++++++++-------- 1 file changed, 38 insertions(+), 28 deletions(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 64a8367c82dd..518116d34649 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -8,7 +8,6 @@ import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import styles from '../../../styles/styles'; -import Form from '../../../components/Form'; import ONYXKEYS from '../../../ONYXKEYS'; import SingleOptionSelector from '../../../components/SingleOptionSelector'; import useLocalize from '../../../hooks/useLocalize'; @@ -22,6 +21,7 @@ import NotFoundPage from '../../ErrorPage/NotFoundPage'; import usePrevious from '../../../hooks/usePrevious'; import * as FormActions from '../../../libs/actions/FormActions'; import * as CardActions from '../../../libs/actions/Card'; +import FormAlertWithSubmitButton from '../../../components/FormAlertWithSubmitButton'; /** Options for reason selector */ const OPTIONS = [ @@ -157,46 +157,56 @@ function ReportCardLostPage({ return ( - + {isReasonConfirmed ? ( <> - {translate('reportCardLostOrDamaged.confirmAddressTitle')} - Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} - numberOfLinesTitle={2} - wrapperStyle={styles.ph0} + + {translate('reportCardLostOrDamaged.confirmAddressTitle')} + Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} + numberOfLinesTitle={2} + // wrapperStyle={styles.ph0} + /> + {translate('reportCardLostOrDamaged.currentCardInfo')} + + - {shouldShowAddressError && {translate('reportCardLostOrDamaged.addressError')}} - {translate('reportCardLostOrDamaged.currentCardInfo')} ) : ( - - {translate('reportCardLostOrDamaged.reasonTitle')} - + + {translate('reportCardLostOrDamaged.reasonTitle')} + + + - {shouldShowReasonError && {translate('reportCardLostOrDamaged.reasonError')}} - + )} - +
); } From 00874864f53c617be8c3c802efdc2b6b21642f00 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 6 Oct 2023 14:23:32 +0200 Subject: [PATCH 56/64] remove unnecessary comment --- src/pages/settings/Wallet/ReportCardLostPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 518116d34649..d13f80c00544 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -176,7 +176,6 @@ function ReportCardLostPage({ shouldShowRightIcon onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} numberOfLinesTitle={2} - // wrapperStyle={styles.ph0} /> {translate('reportCardLostOrDamaged.currentCardInfo')} From 2ad20cfe55b452d467772c00ed5ea50b6a56fd12 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 6 Oct 2023 14:28:21 +0200 Subject: [PATCH 57/64] add extra padding on top --- src/pages/settings/Wallet/ReportCardLostPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index d13f80c00544..322b5aede143 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -164,7 +164,7 @@ function ReportCardLostPage({ title={translate('reportCardLostOrDamaged.screenTitle')} onBackButtonPress={handleBackButtonPress} /> - + {isReasonConfirmed ? ( <> From 6c7d9ab016cbd0138e6ec552917975f5f6b1d0c3 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 6 Oct 2023 14:34:20 +0200 Subject: [PATCH 58/64] use MenuItem instead of MenuItemWithTopDescription --- src/pages/settings/Wallet/ExpensifyCardPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js index ec4788f7637a..d3c919d15d6f 100644 --- a/src/pages/settings/Wallet/ExpensifyCardPage.js +++ b/src/pages/settings/Wallet/ExpensifyCardPage.js @@ -19,6 +19,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons'; import * as CardUtils from '../../../libs/CardUtils'; import Button from '../../../components/Button'; import CardDetails from './WalletPage/CardDetails'; +import MenuItem from '../../../components/MenuItem'; const propTypes = { /* Onyx Props */ @@ -117,9 +118,8 @@ function ExpensifyCardPage({ interactive={false} titleStyle={styles.walletCardNumber} /> - Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(domain))} From 6ffaca728f22de304d1b7e9e6126e1e7320ddadc Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 10 Oct 2023 09:50:36 +0200 Subject: [PATCH 59/64] support multiline title --- src/pages/settings/Wallet/ReportCardLostPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js index 322b5aede143..29a588916326 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.js +++ b/src/pages/settings/Wallet/ReportCardLostPage.js @@ -190,7 +190,7 @@ function ReportCardLostPage({ ) : ( <> - {translate('reportCardLostOrDamaged.reasonTitle')} + {translate('reportCardLostOrDamaged.reasonTitle')} Date: Tue, 10 Oct 2023 16:20:05 +0200 Subject: [PATCH 60/64] fix linting --- src/libs/actions/Card.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js index 6af7e09f4899..4849c9157741 100644 --- a/src/libs/actions/Card.js +++ b/src/libs/actions/Card.js @@ -105,8 +105,4 @@ function clearCardListErrors(cardID) { Onyx.merge(ONYXKEYS.CARD_LIST, {[cardID]: {errors: null, isLoading: false}}); } -export { - requestReplacementExpensifyCard, - activatePhysicalExpensifyCard, - clearCardListErrors -}; +export {requestReplacementExpensifyCard, activatePhysicalExpensifyCard, clearCardListErrors}; From abeaab6ece68110fec6032b37a9b9b0ba674070f Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 11 Oct 2023 10:07:25 +0200 Subject: [PATCH 61/64] change forms onyx key --- src/ONYXKEYS.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index d8658446a8c8..34b8d0e02db4 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -291,7 +291,7 @@ const ONYXKEYS = { PRIVATE_NOTES_FORM: 'privateNotesForm', I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm', INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm', - REPORT_PHYSICAL_CARD_FORM: 'reportPhysicalCardForm', + REPORT_PHYSICAL_CARD_FORM: 'requestPhysicalCardForm', REPORT_VIRTUAL_CARD_FRAUD: 'reportVirtualCardFraudForm', }, } as const; From c4489207c16eae201db1badf9f211cc042fc4220 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 16 Oct 2023 10:14:59 +0200 Subject: [PATCH 62/64] modify route name to singular --- src/ROUTES.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 71520e265c1b..876063e0fdfe 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -85,8 +85,8 @@ export default { SETTINGS_WALLET_TRANSFER_BALANCE: 'settings/wallet/transfer-balance', SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT: 'settings/wallet/choose-transfer-account', SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED: { - route: '/settings/wallet/cards/:domain/report-card-lost-or-damaged', - getRoute: (domain: string) => `/settings/wallet/cards/${domain}/report-card-lost-or-damaged`, + route: '/settings/wallet/card/:domain/report-card-lost-or-damaged', + getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-card-lost-or-damaged`, }, SETTINGS_WALLET_CARD_ACTIVATE: { route: 'settings/wallet/cards/:domain/activate', From 80f1e99ad5ab68d6bca7aec091b3a81f8b8c13e5 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 17 Oct 2023 15:27:44 +0200 Subject: [PATCH 63/64] spread styles array --- src/components/SelectCircle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js index 9429e662e4bf..55e410f8baa1 100644 --- a/src/components/SelectCircle.js +++ b/src/components/SelectCircle.js @@ -22,7 +22,7 @@ const defaultProps = { function SelectCircle(props) { return ( - + {props.isChecked && ( Date: Wed, 18 Oct 2023 15:06:22 +0200 Subject: [PATCH 64/64] change SelectCircle border color --- src/components/SingleOptionSelector.js | 2 +- src/styles/styles.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js index 3fa67ae01a75..889b6a7d1f96 100644 --- a/src/components/SingleOptionSelector.js +++ b/src/components/SingleOptionSelector.js @@ -50,7 +50,7 @@ function SingleOptionSelector({options, selectedOptionKey, onSelectOption, trans > {translate(option.label)} diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 9e73dc5415fc..012a74004b3a 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3967,6 +3967,10 @@ const styles = (theme: ThemeDefault) => checkboxWithLabelCheckboxStyle: { marginLeft: -2, }, + + singleOptionSelectorCircle: { + borderColor: theme.icon, + }, } satisfies Styles); // For now we need to export the styles function that takes the theme as an argument