From e78e299f62c09bac64fdefb4f17f975cb3594e75 Mon Sep 17 00:00:00 2001 From: Vit Horacek Date: Fri, 6 Aug 2021 17:28:10 +0100 Subject: [PATCH 1/7] Add translations for VBA loading animation --- src/languages/en.js | 4 ++++ src/languages/es.js | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/languages/en.js b/src/languages/en.js index a2d9379d2a96..7eee77d0611b 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -546,6 +546,10 @@ export default { certify: 'Must certify information is true and accurate', }, }, + vbaLoadingAnimation: { + oneMoment: 'One moment...', + explanationLine: 'We’re taking a look at your information. You will be able to continue with next steps shortly.', + }, session: { offlineMessageRetry: 'Looks like you\'re offline. Please check your connection and try again.', offlineMessage: 'Looks like you\'re offline.', diff --git a/src/languages/es.js b/src/languages/es.js index c93e0a4103e9..212351458bf8 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -548,6 +548,10 @@ export default { certify: 'Debe certificar que la información es verdadera y precisa', }, }, + vbaLoadingAnimation: { + oneMoment: 'Un momento...', + explanationLine: 'Estamos verificando tu información y podrás continuar con los siguientes pasos en unos momentos.', + }, session: { offlineMessageRetry: 'Parece que estás desconectado. Por favor chequea tu conexión e inténtalo otra vez', offlineMessage: 'Parece que estás desconectado.', From df53150c7d9f492faf459ebab90601f2da5bccc3 Mon Sep 17 00:00:00 2001 From: Vit Horacek Date: Fri, 6 Aug 2021 21:06:37 +0100 Subject: [PATCH 2/7] Add new loading animation for the VBA flow --- src/components/VBALoadingIndicator.js | 49 +++++++++++++++++++ .../ReimbursementAccountPage.js | 4 +- src/styles/styles.js | 5 ++ 3 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 src/components/VBALoadingIndicator.js diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js new file mode 100644 index 000000000000..d94f72806874 --- /dev/null +++ b/src/components/VBALoadingIndicator.js @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {Image, StyleSheet, View} from 'react-native'; +import styles from '../styles/styles'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import Text from './Text'; +import compose from '../libs/compose'; + +const propTypes = { + /** Controls whether the loader is mounted and displayed */ + visible: PropTypes.bool, + + ...withLocalizePropTypes, +}; + +const defaultProps = { + visible: true, +}; + +/** + * Loading indication component intended be shown between the steps of VBA flow + * + * @returns {JSX.Element} + */ +const VBALoadingIndicator = ({translate, visible}) => visible && ( + + + + + {translate('vbaLoadingAnimation.oneMoment')} + + + {translate('vbaLoadingAnimation.explanationLine')} + + + +); + +VBALoadingIndicator.propTypes = propTypes; +VBALoadingIndicator.defaultProps = defaultProps; + +export default compose( + withLocalize, +)(VBALoadingIndicator); diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index 05c93882eb35..ba6bb1f8646e 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import ScreenWrapper from '../../components/ScreenWrapper'; import {fetchFreePlanVerifiedBankAccount} from '../../libs/actions/BankAccounts'; import ONYXKEYS from '../../ONYXKEYS'; -import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; +import VBALoadingIndicator from '../../components/VBALoadingIndicator'; import Permissions from '../../libs/Permissions'; import Navigation from '../../libs/Navigation/Navigation'; import CONST from '../../CONST'; @@ -156,7 +156,7 @@ class ReimbursementAccountPage extends React.Component { } if (this.props.reimbursementAccount.loading) { - return ; + return ; } let errorComponent; diff --git a/src/styles/styles.js b/src/styles/styles.js index 31d8103e433f..1983a2b7b3fd 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -284,6 +284,11 @@ const styles = { width: variables.componentSizeNormal, }, + loadingVBAAnimation: { + width: 160, + height: 160, + }, + picker: { inputIOS: { fontFamily: fontFamily.GTA, From a97f08b5a88dcc182247637880e3f806d26bbf05 Mon Sep 17 00:00:00 2001 From: Vit Horacek Date: Tue, 10 Aug 2021 13:52:52 +0100 Subject: [PATCH 3/7] Update styles --- src/components/VBALoadingIndicator.js | 28 ++++++++++--------- .../ReimbursementAccountPage.js | 1 + 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js index d94f72806874..cff478f95133 100644 --- a/src/components/VBALoadingIndicator.js +++ b/src/components/VBALoadingIndicator.js @@ -24,19 +24,21 @@ const defaultProps = { */ const VBALoadingIndicator = ({translate, visible}) => visible && ( - - - - {translate('vbaLoadingAnimation.oneMoment')} - - - {translate('vbaLoadingAnimation.explanationLine')} - + + + + + {translate('vbaLoadingAnimation.oneMoment')} + + + {translate('vbaLoadingAnimation.explanationLine')} + + ); diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index ba6bb1f8646e..b5ce6ea0b752 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -156,6 +156,7 @@ class ReimbursementAccountPage extends React.Component { } if (this.props.reimbursementAccount.loading) { + // if (true) { return ; } From f77af65432e2cc7bea2580abdc14fd71d3e4cc42 Mon Sep 17 00:00:00 2001 From: Vit Horacek Date: Tue, 10 Aug 2021 13:56:39 +0100 Subject: [PATCH 4/7] Use cloudfront url const --- src/components/VBALoadingIndicator.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js index cff478f95133..90152a533e20 100644 --- a/src/components/VBALoadingIndicator.js +++ b/src/components/VBALoadingIndicator.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {Image, StyleSheet, View} from 'react-native'; import styles from '../styles/styles'; +import CONST from '../CONST'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Text from './Text'; import compose from '../libs/compose'; @@ -26,7 +27,7 @@ const VBALoadingIndicator = ({translate, visible}) => visible && ( Date: Tue, 10 Aug 2021 13:59:12 +0100 Subject: [PATCH 5/7] Remove the comment --- src/pages/ReimbursementAccount/ReimbursementAccountPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index b5ce6ea0b752..ba6bb1f8646e 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -156,7 +156,6 @@ class ReimbursementAccountPage extends React.Component { } if (this.props.reimbursementAccount.loading) { - // if (true) { return ; } From 927b230cf2196bd2600325b6f472b8ead995c993 Mon Sep 17 00:00:00 2001 From: Vit Horacek Date: Tue, 10 Aug 2021 14:16:01 +0100 Subject: [PATCH 6/7] Remove unneccesary compose --- .../expensify/chat/generated/BasePackageList.java | 13 +++++++++++++ src/components/VBALoadingIndicator.js | 5 +---- 2 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java diff --git a/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java b/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java new file mode 100644 index 000000000000..77ee44f9be7a --- /dev/null +++ b/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java @@ -0,0 +1,13 @@ +package com.expensify.chat.generated; + +import java.util.Arrays; +import java.util.List; +import org.unimodules.core.interfaces.Package; + +public class BasePackageList { + public List getPackageList() { + return Arrays.asList( + new expo.modules.haptics.HapticsPackage() + ); + } +} diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js index 90152a533e20..1dd81408ed01 100644 --- a/src/components/VBALoadingIndicator.js +++ b/src/components/VBALoadingIndicator.js @@ -5,7 +5,6 @@ import styles from '../styles/styles'; import CONST from '../CONST'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Text from './Text'; -import compose from '../libs/compose'; const propTypes = { /** Controls whether the loader is mounted and displayed */ @@ -47,6 +46,4 @@ const VBALoadingIndicator = ({translate, visible}) => visible && ( VBALoadingIndicator.propTypes = propTypes; VBALoadingIndicator.defaultProps = defaultProps; -export default compose( - withLocalize, -)(VBALoadingIndicator); +export default withLocalize(VBALoadingIndicator); From 20aa7af76c655f598d1ac7e798bc0b2fc8c20494 Mon Sep 17 00:00:00 2001 From: Vit Horacek Date: Tue, 10 Aug 2021 15:44:56 +0100 Subject: [PATCH 7/7] Remove the jsx component docs and unnecessary visible parameter --- .../chat/generated/BasePackageList.java | 13 ------------- src/components/VBALoadingIndicator.js | 16 +--------------- .../ReimbursementAccountPage.js | 2 +- 3 files changed, 2 insertions(+), 29 deletions(-) delete mode 100644 android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java diff --git a/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java b/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java deleted file mode 100644 index 77ee44f9be7a..000000000000 --- a/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java +++ /dev/null @@ -1,13 +0,0 @@ -package com.expensify.chat.generated; - -import java.util.Arrays; -import java.util.List; -import org.unimodules.core.interfaces.Package; - -public class BasePackageList { - public List getPackageList() { - return Arrays.asList( - new expo.modules.haptics.HapticsPackage() - ); - } -} diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js index 1dd81408ed01..a53c83e38e3f 100644 --- a/src/components/VBALoadingIndicator.js +++ b/src/components/VBALoadingIndicator.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import {Image, StyleSheet, View} from 'react-native'; import styles from '../styles/styles'; import CONST from '../CONST'; @@ -7,22 +6,10 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Text from './Text'; const propTypes = { - /** Controls whether the loader is mounted and displayed */ - visible: PropTypes.bool, - ...withLocalizePropTypes, }; -const defaultProps = { - visible: true, -}; - -/** - * Loading indication component intended be shown between the steps of VBA flow - * - * @returns {JSX.Element} - */ -const VBALoadingIndicator = ({translate, visible}) => visible && ( +const VBALoadingIndicator = ({translate}) => ( visible && ( ); VBALoadingIndicator.propTypes = propTypes; -VBALoadingIndicator.defaultProps = defaultProps; export default withLocalize(VBALoadingIndicator); diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index ba6bb1f8646e..0a964289f5f4 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -156,7 +156,7 @@ class ReimbursementAccountPage extends React.Component { } if (this.props.reimbursementAccount.loading) { - return ; + return ; } let errorComponent;