Merge pull request Expensify#88479 from ShridharGoel/gusto1.6

[NoQA] Implement Gusto connection flow

Author: yuwenmemon

src/components/ConnectToGustoFlow/index.native.tsx

@@ -0,0 +1,66 @@
+import React, {useCallback, useRef, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {WebView} from 'react-native-webview';
+import ActivityIndicator from '@components/ActivityIndicator';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import getGustoSetupLink from '@libs/actions/connections/Gusto';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type ConnectToGustoFlowProps from './types';
+
+function ConnectToGustoFlow({policyID}: ConnectToGustoFlowProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const webViewRef = useRef<WebView>(null);
+    const [isWebViewOpen, setIsWebViewOpen] = useState(true);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+
+    const renderLoading = useCallback(
+        () => (
+            <View style={[StyleSheet.absoluteFill, styles.fullScreenLoading]}>
+                <ActivityIndicator
+                    size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                    reasonAttributes={{context: 'ConnectToGustoFlow'}}
+                />
+            </View>
+        ),
+        [styles.fullScreenLoading],
+    );
+
+    const authToken = session?.authToken ?? null;
+    return (
+        <Modal
+            onClose={() => setIsWebViewOpen(false)}
+            fullscreen
+            isVisible={isWebViewOpen}
+            type={CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
+        >
+            <HeaderWithBackButton
+                title={translate('workspace.common.hr')}
+                onBackButtonPress={() => setIsWebViewOpen(false)}
+                shouldDisplayHelpButton={false}
+            />
+            <FullPageOfflineBlockingView>
+                <WebView
+                    ref={webViewRef}
+                    source={{
+                        uri: getGustoSetupLink(policyID),
+                        headers: {
+                            Cookie: `authToken=${authToken}`,
+                        },
+                    }}
+                    incognito
+                    startInLoadingState
+                    renderLoading={renderLoading}
+                />
+            </FullPageOfflineBlockingView>
+        </Modal>
+    );
+}
+
+export default ConnectToGustoFlow;

src/components/ConnectToGustoFlow/index.tsx

@@ -0,0 +1,17 @@
+import {useEffect} from 'react';
+import useEnvironment from '@hooks/useEnvironment';
+import getGustoSetupLink from '@libs/actions/connections/Gusto';
+import {openLink} from '@userActions/Link';
+import type ConnectToGustoFlowProps from './types';
+
+function ConnectToGustoFlow({policyID}: ConnectToGustoFlowProps) {
+    const {environmentURL} = useEnvironment();
+
+    useEffect(() => {
+        openLink(getGustoSetupLink(policyID), environmentURL);
+    }, [environmentURL, policyID]);
+
+    return null;
+}
+
+export default ConnectToGustoFlow;

src/components/ConnectToGustoFlow/types.ts

@@ -0,0 +1,5 @@
+type ConnectToGustoFlowProps = {
+    policyID: string;
+};
+
+export default ConnectToGustoFlowProps;

src/libs/actions/connections/Gusto.ts

@@ -0,0 +1,14 @@
+import type {ConnectPolicyToGustoParams} from '@libs/API/parameters';
+import {READ_COMMANDS} from '@libs/API/types';
+import {getCommandURL} from '@libs/ApiUtils';
+
+function getGustoSetupLink(policyID: string) {
+    const params: ConnectPolicyToGustoParams = {policyID};
+    const commandURL = getCommandURL({
+        command: READ_COMMANDS.CONNECT_POLICY_TO_GUSTO,
+        shouldSkipWebProxy: true,
+    });
+    return commandURL + new URLSearchParams(params).toString();
+}
+
+export default getGustoSetupLink;

src/pages/workspace/hr/WorkspaceHRPage.tsx

@@ -1,6 +1,7 @@
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
+import ConnectToGustoFlow from '@components/ConnectToGustoFlow';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -11,13 +12,15 @@ import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hook
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePermissions from '@hooks/usePermissions';
+import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWorkspaceDocumentTitle from '@hooks/useWorkspaceDocumentTitle';
 import {openPolicyHRPage} from '@libs/actions/PolicyConnections';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {WorkspaceSplitNavigatorParamList} from '@libs/Navigation/types';
+import {isGustoConnected} from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
@@ -33,8 +36,11 @@ function WorkspaceHRPage({
     const {isBetaEnabled} = usePermissions();
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const policy = usePolicy(policyID);
+    const [activeGustoFlowKey, setActiveGustoFlowKey] = useState<number>();
     const icons = useMemoizedLazyExpensifyIcons(['GustoSquare']);
     const illustrations = useMemoizedLazyIllustrations(['NewUser']);
+    const isConnected = isGustoConnected(policy);
 
     useWorkspaceDocumentTitle(undefined, 'workspace.common.hr');
 
@@ -62,6 +68,12 @@ function WorkspaceHRPage({
                 shouldShowOfflineIndicatorInWideScreen
                 offlineIndicatorStyle={styles.mtAuto}
             >
+                {!!activeGustoFlowKey && (
+                    <ConnectToGustoFlow
+                        key={activeGustoFlowKey}
+                        policyID={policyID}
+                    />
+                )}
                 <HeaderWithBackButton
                     icon={illustrations.NewUser}
                     title={translate('workspace.common.hr')}
@@ -82,13 +94,15 @@ function WorkspaceHRPage({
                                 iconType={CONST.ICON_TYPE_AVATAR}
                                 wrapperStyle={[styles.ph0, styles.pv2, styles.mt4]}
                                 interactive={false}
-                                shouldShowRightComponent
+                                shouldShowRightComponent={!isConnected}
                                 rightComponent={
-                                    <Button
-                                        small
-                                        text={translate('workspace.hr.gusto.connect')}
-                                        onPress={() => {}}
-                                    />
+                                    !isConnected ? (
+                                        <Button
+                                            small
+                                            text={translate('workspace.hr.gusto.connect')}
+                                            onPress={() => setActiveGustoFlowKey(Math.random())}
+                                        />
+                                    ) : undefined
                                 }
                             />
                         </Section>