Xero authentication flow #40277
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
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
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 |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React, {useRef, useState} from 'react'; | ||
mountiny marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| import type {OnyxEntry} from 'react-native-onyx'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import {WebView} from 'react-native-webview'; | ||
| import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; | ||
| import Button from '@components/Button'; | ||
| import ConfirmModal from '@components/ConfirmModal'; | ||
| import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import Modal from '@components/Modal'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import {removePolicyConnection} from '@libs/actions/connections'; | ||
| import getXeroSetupLink from '@libs/actions/connections/ConnectToXero'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import type {Session} from '@src/types/onyx'; | ||
| import type {ConnectToXeroButtonProps} from './types'; | ||
|
|
||
| type ConnectToXeroButtonOnyxProps = { | ||
mountiny marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| /** Session info for the currently logged in user. */ | ||
| session: OnyxEntry<Session>; | ||
| }; | ||
|
|
||
| function ConnectToXeroButton({policyID, session, shouldDisconnectIntegrationBeforeConnecting, integrationToDisconnect}: ConnectToXeroButtonProps & ConnectToXeroButtonOnyxProps) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
| const webViewRef = useRef<WebView>(null); | ||
| const [isWebViewOpen, setWebViewOpen] = useState(false); | ||
|
|
||
| const authToken = session?.authToken ?? null; | ||
|
|
||
| const renderLoading = () => <FullScreenLoadingIndicator />; | ||
| const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <Button | ||
| onPress={() => { | ||
| if (shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect) { | ||
| setIsDisconnectModalOpen(true); | ||
| return; | ||
| } | ||
| setWebViewOpen(true); | ||
| }} | ||
| text={translate('workspace.accounting.setup')} | ||
| style={styles.justifyContentCenter} | ||
| small | ||
| /> | ||
| {shouldDisconnectIntegrationBeforeConnecting && isDisconnectModalOpen && integrationToDisconnect && ( | ||
| <ConfirmModal | ||
| title={translate('workspace.accounting.disconnectTitle', CONST.POLICY.CONNECTIONS.NAME.QBO)} | ||
| onConfirm={() => { | ||
| removePolicyConnection(policyID, integrationToDisconnect); | ||
| setIsDisconnectModalOpen(false); | ||
| setWebViewOpen(true); | ||
| }} | ||
| isVisible | ||
| onCancel={() => setIsDisconnectModalOpen(false)} | ||
| prompt={translate('workspace.accounting.disconnectPrompt', CONST.POLICY.CONNECTIONS.NAME.XERO)} | ||
| confirmText={translate('workspace.accounting.disconnect')} | ||
| cancelText={translate('common.cancel')} | ||
| danger | ||
| /> | ||
| )} | ||
| <Modal | ||
| onClose={() => setWebViewOpen(false)} | ||
| fullscreen | ||
| isVisible={isWebViewOpen} | ||
| type={CONST.MODAL.MODAL_TYPE.CENTERED} | ||
|
There was a problem hiding this comment. This modal type has a bug for android. More details here: #40978 (comment) |
||
| > | ||
| <HeaderWithBackButton | ||
| title={translate('workspace.accounting.title')} | ||
| onBackButtonPress={() => setWebViewOpen(false)} | ||
| /> | ||
| <FullPageOfflineBlockingView> | ||
| <WebView | ||
| ref={webViewRef} | ||
| source={{ | ||
| uri: getXeroSetupLink(policyID), | ||
| headers: { | ||
| Cookie: `authToken=${authToken}`, | ||
| }, | ||
| }} | ||
| incognito | ||
| startInLoadingState | ||
| renderLoading={renderLoading} | ||
| /> | ||
| </FullPageOfflineBlockingView> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| ConnectToXeroButton.displayName = 'ConnectToXeroButton'; | ||
|
|
||
| export default withOnyx<ConnectToXeroButtonProps & ConnectToXeroButtonOnyxProps, ConnectToXeroButtonOnyxProps>({ | ||
| session: { | ||
| key: ONYXKEYS.SESSION, | ||
| }, | ||
| })(ConnectToXeroButton); | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am not sure where this part of the design is discussed. But I checked the terms step of payment and the other integrations.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you mean that we should consider adding this border also to 'Other integrations" dropdown?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am not sure about it. I was curious why the property was added if it was not required for the integrations PR. We added for Terms page, which looks unrelated to the current PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@SzymczakJ ^
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Whoops, missed that one.
I wanted to reuse CollapsibleSection component and it was matching the design except of this border so I added boolean prop for showing it.
It seemed cleaner for me to add
shouldShowSectionBorder?: boolean;and modify LongTermsForm instead of adding default value toshouldShowSectionBorder. WDYT?