forked from Expensify/App
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request Expensify#34967 from VickyStash/ts-migration/works…
…paceBills-page [TS migration] Migrate 'WorkspaceBills' page to TypeScript
- Loading branch information
Showing
8 changed files
with
106 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,47 @@ | ||
| import Str from 'expensify-common/lib/str'; | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import type {OnyxEntry} from 'react-native-onyx'; | ||
| import CopyTextToClipboard from '@components/CopyTextToClipboard'; | ||
| import * as Expensicons from '@components/Icon/Expensicons'; | ||
| import * as Illustrations from '@components/Icon/Illustrations'; | ||
| import Section from '@components/Section'; | ||
| import Text from '@components/Text'; | ||
| import TextLink from '@components/TextLink'; | ||
| import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import compose from '@libs/compose'; | ||
| import userPropTypes from '@pages/settings/userPropTypes'; | ||
| import * as Link from '@userActions/Link'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import type {Session, User} from '@src/types/onyx'; | ||
|
|
||
| const propTypes = { | ||
| /** The policy ID currently being configured */ | ||
| policyID: PropTypes.string.isRequired, | ||
|
|
||
| ...withLocalizePropTypes, | ||
|
|
||
| /* From Onyx */ | ||
| type WorkspaceBillsFirstSectionOnyxProps = { | ||
| /** Session of currently logged in user */ | ||
| session: PropTypes.shape({ | ||
| /** Email address */ | ||
| email: PropTypes.string.isRequired, | ||
| }), | ||
| session: OnyxEntry<Session>; | ||
|
|
||
| /** Information about the logged in user's account */ | ||
| user: userPropTypes, | ||
| user: OnyxEntry<User>; | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| session: { | ||
| email: null, | ||
| }, | ||
| user: {}, | ||
| type WorkspaceBillsFirstSectionProps = WorkspaceBillsFirstSectionOnyxProps & { | ||
| /** The policy ID currently being configured */ | ||
| policyID: string; | ||
| }; | ||
|
|
||
| function WorkspaceBillsFirstSection(props) { | ||
| function WorkspaceBillsFirstSection({session, policyID, user}: WorkspaceBillsFirstSectionProps) { | ||
| const styles = useThemeStyles(); | ||
| const emailDomain = Str.extractEmailDomain(props.session.email); | ||
| const manageYourBillsUrl = `reports?policyID=${props.policyID}&from=all&type=bill&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`; | ||
| const {translate} = useLocalize(); | ||
|
|
||
| const emailDomain = Str.extractEmailDomain(session?.email ?? ''); | ||
| const manageYourBillsUrl = `reports?policyID=${policyID}&from=all&type=bill&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`; | ||
|
|
||
| return ( | ||
| <Section | ||
| title={props.translate('workspace.bills.manageYourBills')} | ||
| title={translate('workspace.bills.manageYourBills')} | ||
| icon={Illustrations.PinkBill} | ||
| menuItems={[ | ||
| { | ||
| title: props.translate('workspace.bills.viewAllBills'), | ||
| title: translate('workspace.bills.viewAllBills'), | ||
| onPress: () => Link.openOldDotLink(manageYourBillsUrl), | ||
| icon: Expensicons.Bill, | ||
| shouldShowRightIcon: true, | ||
|
|
@@ -59,40 +50,35 @@ function WorkspaceBillsFirstSection(props) { | |
| link: () => Link.buildOldDotURL(manageYourBillsUrl), | ||
| }, | ||
| ]} | ||
| containerStyles={[styles.cardSection]} | ||
| containerStyles={styles.cardSection} | ||
| > | ||
| <View style={[styles.mv3]}> | ||
| <View style={styles.mv3}> | ||
| <Text> | ||
| {props.translate('workspace.bills.askYourVendorsBeforeEmail')} | ||
| {props.user.isFromPublicDomain ? ( | ||
| {translate('workspace.bills.askYourVendorsBeforeEmail')} | ||
| {user?.isFromPublicDomain ? ( | ||
| <TextLink onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}> | ||
| [email protected] | ||
| </TextLink> | ||
| ) : ( | ||
| <CopyTextToClipboard | ||
| text={`${emailDomain}@expensify.cash`} | ||
| textStyles={[styles.textBlue]} | ||
| textStyles={styles.textBlue} | ||
| /> | ||
| )} | ||
| <Text>{props.translate('workspace.bills.askYourVendorsAfterEmail')}</Text> | ||
| <Text>{translate('workspace.bills.askYourVendorsAfterEmail')}</Text> | ||
| </Text> | ||
| </View> | ||
| </Section> | ||
| ); | ||
| } | ||
|
|
||
| WorkspaceBillsFirstSection.propTypes = propTypes; | ||
| WorkspaceBillsFirstSection.defaultProps = defaultProps; | ||
| WorkspaceBillsFirstSection.displayName = 'WorkspaceBillsFirstSection'; | ||
|
|
||
| export default compose( | ||
| withLocalize, | ||
| withOnyx({ | ||
| session: { | ||
| key: ONYXKEYS.SESSION, | ||
| }, | ||
| user: { | ||
| key: ONYXKEYS.USER, | ||
| }, | ||
| }), | ||
| )(WorkspaceBillsFirstSection); | ||
| export default withOnyx<WorkspaceBillsFirstSectionProps, WorkspaceBillsFirstSectionOnyxProps>({ | ||
| session: { | ||
| key: ONYXKEYS.SESSION, | ||
| }, | ||
| user: { | ||
| key: ONYXKEYS.USER, | ||
| }, | ||
| })(WorkspaceBillsFirstSection); | ||
30 changes: 14 additions & 16 deletions
30
...orkspace/bills/WorkspaceBillsNoVBAView.js → ...rkspace/bills/WorkspaceBillsNoVBAView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,43 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import ConnectBankAccountButton from '@components/ConnectBankAccountButton'; | ||
| import * as Illustrations from '@components/Icon/Illustrations'; | ||
| import Section from '@components/Section'; | ||
| import Text from '@components/Text'; | ||
| import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection'; | ||
|
|
||
| const propTypes = { | ||
| type WorkspaceBillsNoVBAViewProps = { | ||
| /** The policy ID currently being configured */ | ||
| policyID: PropTypes.string.isRequired, | ||
|
|
||
| ...withLocalizePropTypes, | ||
| policyID: string; | ||
| }; | ||
|
|
||
| function WorkspaceBillsNoVBAView(props) { | ||
| function WorkspaceBillsNoVBAView({policyID}: WorkspaceBillsNoVBAViewProps) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
|
|
||
| return ( | ||
| <> | ||
| <WorkspaceBillsFirstSection policyID={props.policyID} /> | ||
| <WorkspaceBillsFirstSection policyID={policyID} /> | ||
|
|
||
| <Section | ||
| title={props.translate('workspace.bills.unlockOnlineBillPayment')} | ||
| title={translate('workspace.bills.unlockOnlineBillPayment')} | ||
| icon={Illustrations.LockOpen} | ||
| containerStyles={[styles.cardSection]} | ||
| containerStyles={styles.cardSection} | ||
| > | ||
| <View style={[styles.mv3]}> | ||
| <Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text> | ||
| <View style={styles.mv3}> | ||
| <Text>{translate('workspace.bills.unlockNoVBACopy')}</Text> | ||
| </View> | ||
| <ConnectBankAccountButton | ||
| policyID={props.policyID} | ||
| style={[styles.mt4]} | ||
| policyID={policyID} | ||
| style={styles.mt4} | ||
| /> | ||
| </Section> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| WorkspaceBillsNoVBAView.propTypes = propTypes; | ||
| WorkspaceBillsNoVBAView.displayName = 'WorkspaceBillsNoVBAView'; | ||
|
|
||
| export default withLocalize(WorkspaceBillsNoVBAView); | ||
| export default WorkspaceBillsNoVBAView; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import type {StackScreenProps} from '@react-navigation/stack'; | ||
| import React from 'react'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import type {SettingsNavigatorParamList} from '@navigation/types'; | ||
| import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; | ||
| import CONST from '@src/CONST'; | ||
| import type SCREENS from '@src/SCREENS'; | ||
| import WorkspaceBillsNoVBAView from './WorkspaceBillsNoVBAView'; | ||
| import WorkspaceBillsVBAView from './WorkspaceBillsVBAView'; | ||
|
|
||
| type WorkspaceBillsPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.BILLS>; | ||
|
|
||
| function WorkspaceBillsPage({route}: WorkspaceBillsPageProps) { | ||
| const {translate} = useLocalize(); | ||
|
|
||
| return ( | ||
| <WorkspacePageWithSections | ||
| shouldUseScrollView | ||
| headerText={translate('workspace.common.bills')} | ||
| route={route} | ||
| guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS} | ||
| > | ||
| {(hasVBA: boolean, policyID: string) => ( | ||
| <> | ||
| {!hasVBA && <WorkspaceBillsNoVBAView policyID={policyID} />} | ||
| {hasVBA && <WorkspaceBillsVBAView policyID={policyID} />} | ||
| </> | ||
| )} | ||
| </WorkspacePageWithSections> | ||
| ); | ||
| } | ||
|
|
||
| WorkspaceBillsPage.displayName = 'WorkspaceBillsPage'; | ||
|
|
||
| export default WorkspaceBillsPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.