add new step

src/pages/workspace/companyCards/assignCard/BankConnection/index.native.tsx

@@ -0,0 +1,90 @@
+import React, {useEffect, useRef} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import {WebView} from 'react-native-webview';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import * as CardUtils from '@libs/CardUtils';
+import getUAForWebView from '@libs/getUAForWebView';
+import Navigation from '@libs/Navigation/Navigation';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import * as CompanyCards from '@userActions/CompanyCards';
+import getCompanyCardBankConnection from '@userActions/getCompanyCardBankConnection';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {CompanyCardFeed} from '@src/types/onyx';
+
+type BankConnectionStepProps = {
+    policyID?: string;
+
+    /** Selected feed */
+    feed: CompanyCardFeed;
+};
+
+function BankConnection({policyID, feed}: BankConnectionStepProps) {
+    const {translate} = useLocalize();
+    const webViewRef = useRef<WebView>(null);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const authToken = session?.authToken ?? null;
+    const bankName = CardUtils.getCardFeedName(feed);
+    const url = getCompanyCardBankConnection(policyID, bankName);
+    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID ?? '-1');
+    const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const isFeedExpired = CardUtils.isSelectedFeedExpired(cardFeeds?.settings?.oAuthAccountDetails?.[feed]);
+
+    const renderLoading = () => <FullScreenLoadingIndicator />;
+
+    const handleBackButtonPress = () => {
+        Navigation.goBack();
+    };
+
+    useEffect(() => {
+        if (!url) {
+            return;
+        }
+        if (!isFeedExpired) {
+            CompanyCards.setAssignCardStepAndData({
+                currentStep: CONST.COMPANY_CARD.STEP.ASSIGNEE,
+                isEditing: false,
+            });
+        }
+    }, [isFeedExpired, url]);
+
+    return (
+        <ScreenWrapper
+            testID={BankConnection.displayName}
+            shouldShowOfflineIndicator={false}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('workspace.companyCards.assignCard')}
+                onBackButtonPress={handleBackButtonPress}
+            />
+            <FullPageOfflineBlockingView>
+                {!!url && (
+                    <WebView
+                        ref={webViewRef}
+                        source={{
+                            uri: url,
+                            headers: {
+                                Cookie: `authToken=${authToken}`,
+                            },
+                        }}
+                        userAgent={getUAForWebView()}
+                        incognito
+                        startInLoadingState
+                        renderLoading={renderLoading}
+                    />
+                )}
+            </FullPageOfflineBlockingView>
+        </ScreenWrapper>
+    );
+}
+
+BankConnection.displayName = 'BankConnection';
+
+export default BankConnection;

src/pages/workspace/companyCards/assignCard/BankConnection/index.tsx

@@ -0,0 +1,92 @@
+import React, {useCallback, useEffect} from 'react';
+import BlockingView from '@components/BlockingViews/BlockingView';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Illustrations from '@components/Icon/Illustrations';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as CardUtils from '@libs/CardUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import getCurrentUrl from '@navigation/currentUrl';
+import * as CompanyCards from '@userActions/CompanyCards';
+import getCompanyCardBankConnection from '@userActions/getCompanyCardBankConnection';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import type {CompanyCardFeed} from '@src/types/onyx';
+import openBankConnection from './openBankConnection';
+
+let customWindow: Window | null = null;
+
+type BankConnectionStepProps = {
+    policyID?: string;
+
+    /** Selected feed */
+    feed: CompanyCardFeed;
+};
+
+function BankConnection({policyID, feed}: BankConnectionStepProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const bankName = CardUtils.getCardFeedName(feed);
+    const currentUrl = getCurrentUrl();
+    const isBankConnectionCompleteRoute = currentUrl.includes(ROUTES.BANK_CONNECTION_COMPLETE);
+    const url = getCompanyCardBankConnection(policyID, bankName);
+
+    const onOpenBankConnectionFlow = useCallback(() => {
+        if (!url) {
+            return;
+        }
+        customWindow = openBankConnection(url);
+    }, [url]);
+
+    const handleBackButtonPress = () => {
+        Navigation.goBack();
+    };
+
+    const CustomSubtitle = (
+        <Text style={[styles.textAlignCenter, styles.textSupporting]}>
+            {bankName && translate(`workspace.moreFeatures.companyCards.pendingBankDescription`, {bankName})}
+            <TextLink onPress={onOpenBankConnectionFlow}>{translate('workspace.moreFeatures.companyCards.pendingBankLink')}</TextLink>
+        </Text>
+    );
+
+    useEffect(() => {
+        if (!url) {
+            return;
+        }
+        if (isBankConnectionCompleteRoute) {
+            customWindow?.close();
+            CompanyCards.setAssignCardStepAndData({
+                currentStep: CONST.COMPANY_CARD.STEP.ASSIGNEE,
+                isEditing: false,
+            });
+            return;
+        }
+        customWindow = openBankConnection(url);
+    }, [isBankConnectionCompleteRoute, policyID, url]);
+
+    return (
+        <ScreenWrapper testID={BankConnection.displayName}>
+            <HeaderWithBackButton
+                title={translate('workspace.companyCards.assignCard')}
+                onBackButtonPress={handleBackButtonPress}
+            />
+            <BlockingView
+                icon={Illustrations.PendingBank}
+                iconWidth={styles.pendingBankCardIllustration.width}
+                iconHeight={styles.pendingBankCardIllustration.height}
+                title={translate('workspace.moreFeatures.companyCards.pendingBankTitle')}
+                linkKey="workspace.moreFeatures.companyCards.pendingBankLink"
+                CustomSubtitle={CustomSubtitle}
+                shouldShowLink
+                onLinkPress={onOpenBankConnectionFlow}
+            />
+        </ScreenWrapper>
+    );
+}
+
+BankConnection.displayName = 'BankConnection';
+
+export default BankConnection;

src/pages/workspace/companyCards/assignCard/BankConnection/openBankConnection/index.tsx

@@ -0,0 +1,5 @@
+const handleOpenBankConnectionFlow = (url: string) => {
+    return window.open(url, '_blank');
+};
+
+export default handleOpenBankConnectionFlow;

src/pages/workspace/companyCards/assignCard/BankConnection/openBankConnection/index.website.tsx

@@ -0,0 +1,14 @@
+const WINDOW_WIDTH = 700;
+const WINDOW_HEIGHT = 600;
+
+const handleOpenBankConnectionFlow = (url: string) => {
+    const screenWidth = window.screen.width;
+    const screenHeight = window.screen.height;
+    const left = (screenWidth - WINDOW_WIDTH) / 2;
+    const top = (screenHeight - WINDOW_HEIGHT) / 2;
+    const popupFeatures = `width=${WINDOW_WIDTH},height=${WINDOW_HEIGHT},left=${left},top=${top},scrollbars=yes,resizable=yes`;
+
+    return window.open(url, 'popupWindow', popupFeatures);
+};
+
+export default handleOpenBankConnectionFlow;