Merge pull request #227 from mxenabled/jameson/CT-prop_drill_refactor_1

Jameson/prop drill refactor 1

Author: Jameson13B

src/Connect.tsx

@@ -211,10 +211,6 @@ export const Connect: React.FC<ConnectProps> = ({
     }
   }, [isLoading, step, props.clientConfig])
 
-  const _handleAddManualAccountClick = () => {
-    dispatch(connectActions.stepToAddManualAccount())
-  }
-
   const _handleConsentGoBack = () => {
     // If returnToMicrodeposits is true, we came from MDV and clicking go back should return to MDV
     if (state.returnToMicrodeposits) {
@@ -327,7 +323,6 @@ export const Connect: React.FC<ConnectProps> = ({
               />
               <RenderConnectStep
                 availableAccountTypes={availableAccountTypes}
-                handleAddManualAccountClick={_handleAddManualAccountClick}
                 handleConsentGoBack={_handleConsentGoBack}
                 handleCredentialsGoBack={_handleCredentialsGoBack}
                 handleOAuthGoBack={_handleOAuthGoBack}

src/components/RenderConnectStep.js

@@ -2,7 +2,6 @@ import React, { useContext } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 
-import _pick from 'lodash/pick'
 import _isEmpty from 'lodash/isEmpty'
 
 import { useTokens } from '@kyper/tokenprovider'
@@ -15,8 +14,6 @@ import {
   selectConnectConfig,
   selectIsMobileWebView,
   selectUIMessageVersion,
-  addAggregationData,
-  addVerificationData,
   selectInitialConfig,
 } from 'src/redux/reducers/configSlice'
 
@@ -46,8 +43,6 @@ import { POST_MESSAGES } from 'src/const/postMessages'
 import { PostMessageContext } from 'src/ConnectWidget'
 import useSelectInstitution from 'src/hooks/useSelectInstitution'
 import { DynamicDisclosure } from 'src/views/consent/DynamicDisclosure'
-import { COMBO_JOB_DATA_TYPES } from 'src/const/comboJobDataTypes'
-import { isConsentEnabled } from 'src/redux/reducers/userFeaturesSlice'
 import { canHandleActionableError } from 'src/views/actionableError/consts'
 
 const RenderConnectStep = (props) => {
@@ -73,7 +68,6 @@ const RenderConnectStep = (props) => {
   const selectedInstitution = useSelector(getSelectedInstitution)
   const updateCredentials = useSelector((state) => state.connect.updateCredentials)
   const verifyMemberError = useSelector((state) => state.connect.error)
-  const consentIsEnabled = useSelector((state) => isConsentEnabled(state))
 
   const { handleSelectInstitution } = useSelectInstitution()
 
@@ -91,118 +85,35 @@ const RenderConnectStep = (props) => {
 
   const hasAtriumAPI = client.has_atrium_api
 
-  /**
-   * To show the add manual accounts option, you have to have the profile enabled,
-   * be in agg mode, and not be an atrium client.
-   */
-  const isManualAccountsEnabled =
-    widgetProfile.enable_manual_accounts && mode === AGG_MODE && !hasAtriumAPI
-
   const showSupport = widgetProfile.enable_support_requests && mode === AGG_MODE
-  const usePopularOnly =
-    (clientProfile.uses_custom_popular_institution_list ?? false) ||
-    (client.has_limited_institutions ?? false)
   const isDeleteInstitutionOptionEnabled = widgetProfile?.display_delete_option_in_connect ?? true
 
-  const handleInstitutionSelect = (institution) => {
-    postMessageFunctions.onPostMessage(
-      'connect/selectedInstitution',
-      _pick(institution, ['name', 'guid', 'url', 'code']),
-    )
-
-    // The institution doesn't have credentials until we request it again from server
-    handleSelectInstitution(institution)
-  }
-
   let connectStepView = null
 
   if (step === STEPS.DISCLOSURE) {
-    connectStepView = (
-      <Disclosure
-        mode={mode}
-        onContinue={() =>
-          dispatch({ type: connectActions.ActionTypes.ACCEPT_DISCLOSURE, payload: connectConfig })
-        }
-        ref={props.navigationRef}
-        size={size}
-      />
-    )
+    connectStepView = <Disclosure ref={props.navigationRef} />
   } else if (step === STEPS.SEARCH) {
-    connectStepView = (
-      <Search
-        connectConfig={connectConfig}
-        connectedMembers={connectedMembers}
-        enableManualAccounts={isManualAccountsEnabled}
-        enableSupportRequests={showSupport}
-        isMicrodepositsEnabled={isMicrodepositsEnabled}
-        onAddManualAccountClick={props.handleAddManualAccountClick}
-        onInstitutionSelect={handleInstitutionSelect}
-        ref={props.navigationRef}
-        size={size}
-        stepToMicrodeposits={() => dispatch(connectActions.stepToMicrodeposits())}
-        usePopularOnly={usePopularOnly}
-      />
-    )
+    connectStepView = <Search ref={props.navigationRef} />
   } else if (step === STEPS.INSTITUTION_DISABLED) {
     connectStepView = <InstitutionDisabled ref={props.navigationRef} />
   } else if (step === STEPS.CONSENT) {
     connectStepView = (
       <div>
         <DynamicDisclosure
-          onConsentClick={() => {
-            dispatch({ type: connectActions.ActionTypes.USER_CONSENTED })
-          }}
-          onGoBackClick={() => {
-            props.handleConsentGoBack()
-          }}
+          onGoBackClick={() => props.handleConsentGoBack()}
           ref={props.navigationRef}
         />
       </div>
     )
   } else if (step === STEPS.ADDITIONAL_PRODUCT) {
-    if (!ADDITIONAL_PRODUCT_OPTIONS.includes(connectConfig?.additional_product_option)) {
+    if (!ADDITIONAL_PRODUCT_OPTIONS.includes(connectConfig?.additional_product_option))
       throw new Error('invalid product offer')
-    }
-
-    const onNoClick = () => {
-      // Go to the next step in the flow without changing the configuration
-      dispatch({
-        type: connectActions.ActionTypes.REJECT_ADDITIONAL_PRODUCT,
-        payload: {
-          consentIsEnabled,
-        },
-      })
-    }
-
-    let onYesClick = null
-    if (connectConfig?.additional_product_option === COMBO_JOB_DATA_TYPES.ACCOUNT_NUMBER) {
-      onYesClick = () => {
-        dispatch(addVerificationData({ consentIsEnabled }))
-      }
-    } else if (connectConfig?.additional_product_option === COMBO_JOB_DATA_TYPES.TRANSACTIONS) {
-      onYesClick = () => {
-        dispatch(addAggregationData({ consentIsEnabled }))
-      }
-    }
 
-    connectStepView = (
-      <AdditionalProductStep
-        additionalProductName={connectConfig.additional_product_option}
-        onNoClick={onNoClick}
-        onYesClick={onYesClick}
-        ref={props.navigationRef}
-      />
-    )
+    connectStepView = <AdditionalProductStep ref={props.navigationRef} />
   } else if (step === STEPS.ADD_MANUAL_ACCOUNT) {
     connectStepView = (
       <ManualAccountConnect
         availableAccountTypes={props.availableAccountTypes}
-        onClose={() =>
-          dispatch({
-            type: connectActions.ActionTypes.GO_BACK_MANUAL_ACCOUNT,
-            payload: initialConfig,
-          })
-        }
         onManualAccountAdded={props.onManualAccountAdded}
         ref={props.navigationRef}
       />
@@ -374,7 +285,6 @@ const RenderConnectStep = (props) => {
 
 RenderConnectStep.propTypes = {
   availableAccountTypes: PropTypes.array,
-  handleAddManualAccountClick: PropTypes.func.isRequired,
   handleConsentGoBack: PropTypes.func.isRequired,
   handleCredentialsGoBack: PropTypes.func.isRequired,
   handleOAuthGoBack: PropTypes.func.isRequired,

src/redux/reducers/configSlice.ts

@@ -8,6 +8,7 @@ import {
   REWARD_MODE,
   STEPS,
   COLOR_SCHEME,
+  TAX_MODE,
 } from 'src/const/Connect'
 import { COMBO_JOB_DATA_TYPES } from 'src/const/comboJobDataTypes'
 
@@ -42,7 +43,8 @@ const configSlice = createSlice({
   name: 'config',
   initialState,
   reducers: {
-    addVerificationData: (state) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    addVerificationData: (state, _) => {
       // If the current mode is AGG_MODE, we need to set the include_transactions flag to true
       // in order to continue getting transactions for new connections
       if (state.mode === AGG_MODE) {
@@ -57,7 +59,8 @@ const configSlice = createSlice({
         state.use_cases = ['MONEY_MOVEMENT']
       }
     },
-    addAggregationData: (state) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    addAggregationData: (state, _) => {
       state.include_transactions = true
 
       if (Array.isArray(state.use_cases)) {
@@ -182,6 +185,13 @@ export const selectConnectConfig = createSelector(selectConfig, (config) => ({
   use_cases: config.use_cases,
   additional_product_option: config.additional_product_option,
 }))
+export const selectCurrentMode = createSelector(selectConfig, (config) => ({
+  mode: config.mode,
+  isInAggMode: config.mode === AGG_MODE,
+  isInVerifyMode: config.mode === VERIFY_MODE,
+  isInTaxMode: config.mode === TAX_MODE,
+  isInRewardMode: config.mode === REWARD_MODE,
+}))
 
 export const selectColorScheme = (state: RootState) => state.config.color_scheme
 

src/redux/reducers/userFeaturesSlice.ts

@@ -3,7 +3,11 @@ import * as UserFeatures from 'src/utilities/UserFeatures'
 import { CONNECT_COMBO_JOBS, CONNECT_CONSENT } from 'src/const/UserFeatures'
 import { RootState } from 'src/redux/Store'
 
-export const initialState = {
+type UserFeaturesSlice = {
+  items: { feature_name: string; is_enabled: boolean }[]
+}
+
+export const initialState: UserFeaturesSlice = {
   items: [],
 }
 

src/services/mockedData.ts

@@ -119,7 +119,7 @@ export const initialState = {
   },
   connect: connectDefaultState,
   profiles: { loading: false, ...masterData },
-  userFeatures: { items: [] },
+  userFeatures: { items: [] } as { items: { feature_name: string; is_enabled: boolean }[] },
 }
 
 export const member = {