merge workspace/reimburse pages#8879
Conversation
parasharrajat
left a comment
There was a problem hiding this comment.
In QA steps, add another tests to test NoVBA views.
| : ( | ||
| <Section | ||
| title={this.props.translate('workspace.reimburse.fastReimbursementsHappyMembers')} | ||
| icon={Illustrations.BankUserGreen} | ||
| menuItems={[ | ||
| { | ||
| title: this.props.translate('workspace.reimburse.reimburseReceipts'), | ||
| onPress: () => Link.openOldDotLink(`reports?policyID=${this.props.policyID}&from=all&type=expense&showStates=Archived&isAdvancedFilterMode=true`), | ||
| icon: Expensicons.Bank, | ||
| shouldShowRightIcon: true, | ||
| iconRight: Expensicons.NewWindow, | ||
| }, | ||
| ]} | ||
| > | ||
| <View style={[styles.mv4]}> | ||
| <Text>{this.props.translate('workspace.reimburse.fastReimbursementsVBACopy')}</Text> | ||
| </View> | ||
| </Section> | ||
| )} |
There was a problem hiding this comment.
Let's break this ternary into two like this
| : ( | |
| <Section | |
| title={this.props.translate('workspace.reimburse.fastReimbursementsHappyMembers')} | |
| icon={Illustrations.BankUserGreen} | |
| menuItems={[ | |
| { | |
| title: this.props.translate('workspace.reimburse.reimburseReceipts'), | |
| onPress: () => Link.openOldDotLink(`reports?policyID=${this.props.policyID}&from=all&type=expense&showStates=Archived&isAdvancedFilterMode=true`), | |
| icon: Expensicons.Bank, | |
| shouldShowRightIcon: true, | |
| iconRight: Expensicons.NewWindow, | |
| }, | |
| ]} | |
| > | |
| <View style={[styles.mv4]}> | |
| <Text>{this.props.translate('workspace.reimburse.fastReimbursementsVBACopy')}</Text> | |
| </View> | |
| </Section> | |
| )} | |
| {Boolean(this.props.hasVBA) && ( | |
| <Section | |
| title={this.props.translate('workspace.reimburse.fastReimbursementsHappyMembers')} | |
| icon={Illustrations.BankUserGreen} | |
| menuItems={[ | |
| { | |
| title: this.props.translate('workspace.reimburse.reimburseReceipts'), | |
| onPress: () => Link.openOldDotLink(`reports?policyID=${this.props.policyID}&from=all&type=expense&showStates=Archived&isAdvancedFilterMode=true`), | |
| icon: Expensicons.Bank, | |
| shouldShowRightIcon: true, | |
| iconRight: Expensicons.NewWindow, | |
| }, | |
| ]} | |
| > | |
| <View style={[styles.mv4]}> | |
| <Text>{this.props.translate('workspace.reimburse.fastReimbursementsVBACopy')}</Text> | |
| </View> | |
| </Section> | |
| )} |
| {!this.props.hasVBA ? ( | ||
| <Section | ||
| title={this.props.translate('workspace.reimburse.unlockNextDayReimbursements')} | ||
| icon={Illustrations.JewelBoxGreen} | ||
| > | ||
| <View style={[styles.mv4]}> | ||
| <Text>{this.props.translate('workspace.reimburse.unlockNoVBACopy')}</Text> | ||
| </View> | ||
| <Button | ||
| text={this.props.translate('workspace.common.bankAccount')} | ||
| onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(this.props.policyID))} | ||
| icon={Expensicons.Bank} | ||
| style={[styles.mt4]} | ||
| iconStyles={[styles.mr5]} | ||
| shouldShowRightIcon | ||
| extraLarge | ||
| success | ||
| /> | ||
| </Section> | ||
| ) |
There was a problem hiding this comment.
| {!this.props.hasVBA ? ( | |
| <Section | |
| title={this.props.translate('workspace.reimburse.unlockNextDayReimbursements')} | |
| icon={Illustrations.JewelBoxGreen} | |
| > | |
| <View style={[styles.mv4]}> | |
| <Text>{this.props.translate('workspace.reimburse.unlockNoVBACopy')}</Text> | |
| </View> | |
| <Button | |
| text={this.props.translate('workspace.common.bankAccount')} | |
| onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(this.props.policyID))} | |
| icon={Expensicons.Bank} | |
| style={[styles.mt4]} | |
| iconStyles={[styles.mr5]} | |
| shouldShowRightIcon | |
| extraLarge | |
| success | |
| /> | |
| </Section> | |
| ) | |
| {!this.props.hasVBA && ( | |
| <Section | |
| title={this.props.translate('workspace.reimburse.unlockNextDayReimbursements')} | |
| icon={Illustrations.JewelBoxGreen} | |
| > | |
| <View style={[styles.mv4]}> | |
| <Text>{this.props.translate('workspace.reimburse.unlockNoVBACopy')}</Text> | |
| </View> | |
| <Button | |
| text={this.props.translate('workspace.common.bankAccount')} | |
| onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(this.props.policyID))} | |
| icon={Expensicons.Bank} | |
| style={[styles.mt4]} | |
| iconStyles={[styles.mr5]} | |
| shouldShowRightIcon | |
| extraLarge | |
| success | |
| /> | |
| </Section> | |
| )} |
| success | ||
| /> | ||
| </Section> | ||
| {Boolean(!this.props.hasVBA) && ( |
There was a problem hiding this comment.
!this.props.hasVBA is already boolean.
There was a problem hiding this comment.
doesn't this.props.hasVBA also is already boolean?
We get it from:
If so, I think we won't need to cast it to boolean in:
{Boolean(this.props.hasVBA) && (|
Added tests for VBA and noVBA views |
Julesssss
left a comment
There was a problem hiding this comment.
Nice refactor and fix 👍
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Cherry-picked to staging by @sketchydroide in version: 1.1.57-8 🚀
@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes. |
|
🚀 Deployed to production by @chiragsalian in version: 1.1.57-17 🚀
|
Details
Merge reimburse expenses NoVBA + VBA pages.
Fixed Issues
$ #7573
Tests
Tests with VBA:
mWeb,Web,Desktop:
Track Distanceis shown when user has VBA enabled.Android/iOS native:
Track Distanceis shown when user has VBA enabled.Tests with no VBA:
mWeb,Web,Desktop:
Track Distanceis shown when user has no VBA enabled.Android/iOS native:
Track Distanceis shown when user has no VBA enabled.Note: The difference between VBA and no VBA views is the bottom of the component:
PR Review Checklist
Contributor (PR Author) Checklist
### Fixed Issuessection aboveTestssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*filesSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */displayNamepropertythisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)Avataris modified, I verified thatAvataris working as expected in all cases)PR Reviewer Checklist
### Fixed Issuessection aboveTestssectionQA stepssectiontoggleReportand notonIconClick).src/languages/*filesSTYLE.md) were followed/** comment above it */displayNamepropertythisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)Avataris modified, I verified thatAvataris working as expected in all cases)QA Steps
Tests with VBA:
mWeb,Web,Desktop:
Track Distanceis shown when user has VBA enabled.Android/iOS native:
Track Distanceis shown when user has VBA enabled.Tests with no VBA:
mWeb,Web,Desktop:
Track Distanceis shown when user has no VBA enabled.Android/iOS native:
Track Distanceis shown when user has no VBA enabled.Note: The difference between VBA and no VBA views is the bottom of the component:
Screenshots
Web
MacOs-Chrome.mov
Mobile Web
iOS-Safari.mov
Android-Chrome.mp4
Desktop
MacOs-Desktop.mov
iOS
Android