Skip to content

Update ValidationStep to display the new Let's chat text and image #5557

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
MariaHCD merged 5 commits into from
Sep 30, 2021
Merged

Update ValidationStep to display the new Let's chat text and image #5557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b444506
Add lets-chat.svg image
HorusGoul Sep 28, 2021
8f92782
Add Let's chat texts (English)
HorusGoul Sep 28, 2021
cea7661
Add translations for the Let's chat texts (Spanish)
HorusGoul Sep 28, 2021
fc146f1
Update ValidationStep to display the new Let's chat text and image
HorusGoul Sep 28, 2021
095162e
Update lets-chat.svg and spacing
HorusGoul Sep 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/images/lets-chat.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/languages/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,9 @@ export default {
descriptionCTA: 'Please enter each transaction amount in the fields below. Example: 1.51',
reviewingInfo: 'Thanks! We\'re reviewing your information, and will be in touch shortly. Please check your chat with Concierge ',
forNextSteps: ' for next steps to finish setting up your bank account.',
letsChatCTA: 'Yes, let\'s chat!',
letsChatText: 'Thanks for providing your information! We have a couple more things to work out, but it\'ll be easier over chat. Ready to get started?',
letsChatTitle: 'Let\'s chat!',
},
beneficialOwnersStep: {
additionalInformation: 'Additional information',
Expand Down
3 changes: 3 additions & 0 deletions src/languages/es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -564,6 +564,9 @@ export default {
descriptionCTA: 'Ingrese el monto de cada transacción en los campos a continuación. Ejemplo: 1.51',
reviewingInfo: '¡Gracias! Estamos revisando tu información y nos comunicaremos contigo en breve. Consulte su chat con Concierge ',
forNextSteps: ' para conocer los próximos pasos para terminar de configurar su cuenta bancaria.',
letsChatCTA: '¡Sí, vamos a chatear!',
letsChatText: '¡Gracias por darnos tu información! Aún nos quedan algunas cosas por revisar, pero será mas fácil hacerlo por chat. ¿Estás listo para comenzar?',
letsChatTitle: '¡Vamos a chatear!',
},
beneficialOwnersStep: {
additionalInformation: 'Información adicional',
Expand Down
20 changes: 11 additions & 9 deletions src/pages/ReimbursementAccount/ValidationStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {isRequiredFulfilled} from '../../libs/ValidationUtils';
import EnableStep from './EnableStep';
import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';
import ReimbursementAccountForm from './ReimbursementAccountForm';
import LetsChatImage from '../../../assets/images/lets-chat.svg';

const propTypes = {
...withLocalizePropTypes,
Expand Down Expand Up @@ -165,10 +166,12 @@ class ValidationStep extends React.Component {
}

const maxAttemptsReached = lodashGet(this.props, 'reimbursementAccount.maxAttemptsReached');
const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING;

return (
<View style={[styles.flex1, styles.justifyContentBetween]}>
<HeaderWithCloseButton
title={this.props.translate('validationStep.headerTitle')}
title={isVerifying ? this.props.translate('validationStep.letsChatTitle') : this.props.translate('validationStep.headerTitle')}
stepCounter={{step: 5, total: 5}}

@HorusGoul HorusGoul Sep 28, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unsure about the Step 5 of 5. That didn't appear in the Figma file; should I remove it when displaying the Let's chat! title?

@MariaHCD MariaHCD Sep 29, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it makes sense to keep it to remain consistent with the previous steps?

@kevinksullivan kevinksullivan Sep 29, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the step counter hit staging yesterday #5255

onCloseButtonPress={Navigation.dismissModal}
/>
Expand Down Expand Up @@ -226,20 +229,19 @@ class ValidationStep extends React.Component {
</View>
</ReimbursementAccountForm>
)}
{!maxAttemptsReached && state === BankAccount.STATE.VERIFYING && (
{isVerifying && (
<View style={[styles.flex1]}>
<View style={[styles.alignItemsCenter, styles.mb5]}>
<LetsChatImage />
</View>
<Text style={[styles.mh5, styles.mb5, styles.flex1]}>
{this.props.translate('validationStep.reviewingInfo')}
<TextLink onPress={this.navigateToConcierge}>
{this.props.translate('common.here')}
</TextLink>
{this.props.translate('validationStep.forNextSteps')}
{this.props.translate('validationStep.letsChatText')}
</Text>
<Button
success
text={this.props.translate('bankAccount.buttonConfirm')}
text={this.props.translate('validationStep.letsChatCTA')}
style={[styles.mh5, styles.mb5]}
onPress={() => Navigation.dismissModal()}
onPress={this.navigateToConcierge}
/>
</View>
)}
Expand Down