[HOLD for payment 2024-07-22] [HOLD for payment 2024-07-17] [HOLD for payment 2024-07-10] [#Wave-Control: Add NetSuite] Add Support for NetSuite Token Input

[yuwenmemon]

Tracking Issue: https://github.com/Expensify/Expensify/issues/377671

Design Doc Section: https://docs.google.com/document/d/1WubNv_VAv78IxG4FKsi9aS0pWESfWvUYbqBAAy5b4bc/edit#heading=h.m7jq555xj2u

HOLD ON https://github.com/Expensify/Expensify/issues/403611

---

We'll add a new page to guide users through setting up NetSuite to work with Expensify and inputting their tokens to initiate the connection.

• Route: /settings/workspaces/{policyID}/accounting/netsuite/token-input
• PageComponent: NetSuiteTokenInputPage
• Calls ConnectPolicyToNetSuite
  Parameters: JSON object consisting of the fields described above.
  • policyID
  • accountID: NetSuite account Id
  • tokenID: Access token Id
  • tokenSecret: Token secret

This screen takes care of authenticating the NetSuite account with Expensify. While the screen shows 5 steps, the first 4 steps are just informational instructions the user needs to perform on their NetSuite account. Hence this would be a pseudo-multi-step form, which would look similar to the Add bank account workflow but the form will only exist in the last step.

The reference for such pseudo-form steps would be similar to FeesStep.

function InstallExpensifyBundle({onNext, screenIndex}: SubStepProps) { // Component name based on the step
    const styles = useThemeStyles();
    const {translate} = useLocalize();

   const titleKey = `workspace.netsuite.tokenInputSteps.${NET_SUITE_TOKEN_INPUT_FORM.STEP_NAMES[screenIndex]}.title` as TranslationPath; // The key for the title based on the step. For example, enableTokenBasedAuth.title. We put these step names in the constant and fetch by the current screenIndex. This ensures we only add 1 component for the first 4 steps.

   
   const descriptionKey = `workspace.netsuite.tokenInputSteps.${NET_SUITE_TOKEN_INPUT_FORM.STEP_NAMES[screenIndex]}.description` as TranslationPath;  // The key for the description based on the step. For example, enableTokenBasedAuth.description




    return (
        <ScrollView style={styles.flex1}>
            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{titleKey}</Text>
            <View style={[styles.ph5]}>
		   <Text>{descriptionKey} </Text> 
                <Button
                    success
                    large
                    style={[styles.w100, styles.mv5]}
                    onPress={onNext}
                    text={translate('common.next')}
                />
            </View>
        </ScrollView>
    );
}

The above screen is the form component step used to take the input from the user, which follows the structure as:

TokenInputFormStep

const STEP_FIELDS = [NET_SUITE_TOKEN_INPUT_KEY.ACCOUNT_ID, NET_SUITE_TOKEN_INPUT_KEY.TOKEN_ID, NET_SUITE_TOKEN_INPUT_KEY.TOKEN_SECRET]; // All the fields relevant for the authentication.

function TokenInputFormStep({onNext, isEditing}: SubStepProps) {
    const {translate} = useLocalize();
    const styles = useThemeStyles();

    const [netSuiteTokenInput] = useOnyx(ONYXKEYS.NET_SUITE_TOKEN_INPUT);

const defaultValues = {
    accountId: netSuiteTokenInput?.[NET_SUITE_TOKEN_INPUT_KEY.ACCOUNT_ID] ?? '',
    tokenId: netSuiteTokenInput?.[NET_SUITE_TOKEN_INPUT_KEY.TOKEN_ID] ?? '',
    tokenSecret: netSuiteTokenInput?.[NET_SUITE_TOKEN_INPUT_KEY.TOKEN_SECRET] ?? '',
};


    const handleSubmit = useNetSuiteTokenInputStepFormSubmit({
        fieldIds: STEP_FIELDS,
        onNext,
        shouldSaveDraft: isEditing,
    });

    return (
        <FormProvider
            formID={ONYXKEYS.FORMS.NET_SUITE_TOKEN_INPUT}
            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
            validate={validate}
            onSubmit={handleSubmit}
            style={[styles.mh5, styles.flexGrow1]}
        >
            <View>
                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('accounting.netsuite.tokenInput.form.credentials')}</Text>
                <View style={[styles.flex1]}>
                    <InputWrapper
                        InputComponent={TextInput} // All the inputs are going to be TextInput.
                        inputID={NET_SUITE_TOKEN_INPUT_KEY.accountId}
                        label={translate('accounting.netsuite.tokenInput.form.accountId')} // Whether we should have a title or description segregation. 
                        aria-label={translate('accounting.netsuite.tokenInput.form.accountId')}
                        role={CONST.ROLE.PRESENTATION}
                        defaultValue={defaultValues.accountId}
                        shouldSaveDraft={!isEditing}
                        containerStyles={[styles.mt6]}
                    />
			<Text>{translate('accounting.netsuite.tokenInput.form.accountIdDescription')}<Text> // Covers for the text 'In NetSuite goto Step > Integration > SOAP Web Services Preferences.'
                </View>

                <View style={[styles.flex1]}>
                    <InputWrapper
                        InputComponent={TextInput} // All the inputs are going to be TextInput.

                        inputID={NET_SUITE_TOKEN_INPUT_KEY.tokenId}
                        label={translate('accounting.netsuite.tokenInput.form.tokenId)}
                        aria-label={translate('accounting.netsuite.tokenInput.form.tokenId)}
                        role={CONST.ROLE.PRESENTATION}
                        defaultValue={defaultValues.tokenId}
                        shouldSaveDraft={!isEditing}
                        containerStyles={[styles.mt6]}
                    />
                </View>

                <View style={[styles.flex1]}>
                    <InputWrapper
                        InputComponent={TextInput} // All the inputs are going to be TextInput.

                        inputID={NET_SUITE_TOKEN_INPUT_KEY.tokenSecret}
                        label={translate('accounting.netsuite.tokenInput.form.tokenSecret')}
                        aria-label={translate('accounting.netsuite.tokenInput.form.tokenSecret)} // Confirm if secret is going to be a secured field like password.
                        role={CONST.ROLE.PRESENTATION}
                        defaultValue={defaultValues.tokenSecret}
                        shouldSaveDraft={!isEditing}
                        containerStyles={[styles.mt6]}
                    />
                </View>
            
            </View>
        </FormProvider>
    );
}

TokenInputFormStep.displayName = TokenInputFormStep;

export default TokenInputFormStep;

Form Container component

function NetSuiteTokenInputForm({ netSuiteTokenInputForm }: TokenInputProps) { // Serves as a container for all the substeps and the form.
    const {translate} = useLocalize();
    const styles = useThemeStyles();

    const values = useMemo(() => getSubstepValues(NET_SUITE_TOKEN_INPUT_KEY, netSuiteTokenInputForm), [netSuiteTokenInputForm]); // Considering it's related to auth and we'll store sensitive data, we shouldn't store the draft here.
    const submit = () => {
        // API Call comes here
        Navigation.goBack(ROUTES.POLICY_ACCOUNTNG.getRoute(policyID));
    };

    const startFrom = useMemo(() => getInitialValuesForTokenInput(values), [values]);

    const {
        componentToRender: SubStep,
        isEditing,
        nextScreen,
        prevScreen,
        moveTo,
        screenIndex,
        goToTheLastStep,
    } = useSubStep({
        bodyContent,
        startFrom,
        onFinished: submit,
    });

    return (
        <ScreenWrapper
            includeSafeAreaPaddingBottom={false}
            testID={NetSuiteTokenInputForm.displayName}
        >
            <HeaderWithBackButton
                title={translate('accounting.netsuite.tokenInput.formTitle')}
                onBackButtonPress={handleBackButtonPress}
            />
            <View style={[styles.ph5, styles.mb5, styles.mt3,]}>
                <InteractiveStepSubHeader // Steps wrapper base component for next button based navigation
                    startStepIndex={1}
                    stepNames={CONST.NET_SUITE_TOKEN_INPUT_FORM.STEP_NAMES}
                />
            </View>
            <SubStep
                isEditing={isEditing}
                onNext={nextScreen}
                onMove={moveTo}
            />
        </ScreenWrapper>
    );
}

NetSuiteTokenInputForm.displayName = NetSuiteTokenInputForm;

export default withOnyx<TokenInputProps, TokenInputPropsOnyxProps>({
    netSuiteTokenInputForm: {
        key: ONYXKEYS.FORMS.NET_SUITE_TOKEN_INPUT_FORM,
    },
})(NetSuiteTokenInputForm);

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @miljakljajic

[melvin-bot]

Current assignee @mananjadhav is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to @miljakljajic (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[yuwenmemon]

PRs for adding this API are in

[mananjadhav]

Thanks for confirming. I'll start working on this one then.

[mananjadhav]

Started working on this one now.

[mananjadhav]

While adding the ConnectToNetSuiteButton component, I found several hardcoded copies for Xero and QBO. This could cause problems when we add NetSuite and other integrations. For instance, when connecting to Xero with existing NetSuite connection, the disconnect modal would show: Are you sure you want to disconnect QuickBooks Online to set up Xero ?.

I've added a PR to fix it but it's built on top of the subsidiary PR. So once that is merged, we can push this one. I'll work on the Token Input PR on top of the connect button PR.

[mananjadhav]

@jamesdeanexpensify @yuwenmemon Would you mind sharing the Spanish translation for all the screens here ? I will work on this tomorrow and if we have Spanish translation before that we can move faster.

[jamesdeanexpensify]

@shmaxey since you're already working on translations for NetSuite. If you have any available for the request above ^^ we can use those, otherwise I can start on them since engineering is asking for these in particular. LMK!

[jamesdeanexpensify]

I'll start working on these today!

[mananjadhav]

I can view the document. I am afk but I am assuming all the content is taken care of.

[jamesdeanexpensify]

Spanish translations are in there, yep!

[mananjadhav]

Thanks for the help here.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.3-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [#Wave-Control: Add NetSuite]: Added NetSuite connect button and fixed copies #44218

If no regressions arise, payment will be issued on 2024-07-10. 🎊

For reference, here are some details about the assignees on this issue:

• @mananjadhav requires payment through NewDot Manual Requests

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mananjadhav] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@miljakljajic] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[mananjadhav]

Payout for this will be centrally paid, no further action here.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.5-13 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [#Wave-Control: Add NetSuite] Add Support for NetSuite Token Input  #44661

If no regressions arise, payment will be issued on 2024-07-17. 🎊

For reference, here are some details about the assignees on this issue:

• @mananjadhav requires payment through NewDot Manual Requests

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mananjadhav] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@miljakljajic] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.6-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [#Wave-Control: Add NetSuite] Add Support for NetSuite Token Input  #44661

If no regressions arise, payment will be issued on 2024-07-22. 🎊

For reference, here are some details about the assignees on this issue:

• @mananjadhav requires payment through NewDot Manual Requests

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mananjadhav] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@miljakljajic] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.